218 lines
8.2 KiB
TypeScript
218 lines
8.2 KiB
TypeScript
'use client';
|
|
|
|
import { useSearchParams, useRouter } from 'next/navigation';
|
|
import { useState, useEffect, useRef, FormEvent, Suspense } from 'react';
|
|
import Link from 'next/link';
|
|
import Image from 'next/image';
|
|
import { Search, ArrowLeft, FileText } from 'lucide-react';
|
|
|
|
interface SearchResult {
|
|
title: string;
|
|
description: string;
|
|
thumbnail?: string;
|
|
}
|
|
|
|
function SearchContent() {
|
|
const searchParams = useSearchParams();
|
|
const router = useRouter();
|
|
const initialQuery = searchParams.get('query') || '';
|
|
|
|
const [query, setQuery] = useState(initialQuery);
|
|
const [results, setResults] = useState<SearchResult[]>([]);
|
|
const [loading, setLoading] = useState(false);
|
|
const [searched, setSearched] = useState(false);
|
|
const lastSearchedQuery = useRef<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
if (initialQuery && initialQuery !== lastSearchedQuery.current) {
|
|
lastSearchedQuery.current = initialQuery;
|
|
performSearch(initialQuery);
|
|
}
|
|
}, [initialQuery]);
|
|
|
|
const performSearch = async (searchQuery: string) => {
|
|
if (!searchQuery.trim()) return;
|
|
|
|
setLoading(true);
|
|
setSearched(true);
|
|
|
|
try {
|
|
const response = await fetch(`/api/search?query=${encodeURIComponent(searchQuery)}`);
|
|
const data = await response.json();
|
|
setResults(data.results || []);
|
|
} catch (error) {
|
|
console.error('Search failed:', error);
|
|
setResults([]);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleSearch = (e: FormEvent) => {
|
|
e.preventDefault();
|
|
if (query.trim()) {
|
|
router.push(`/search?query=${encodeURIComponent(query.trim())}`);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<main className="min-h-screen bg-background">
|
|
{/* Clean header */}
|
|
<header className="sticky top-0 z-10 bg-background/95 backdrop-blur-md border-b border-border/50">
|
|
<div className="max-w-3xl mx-auto px-6 py-4">
|
|
<div className="flex items-center gap-4">
|
|
<Link
|
|
href="/"
|
|
className="p-2 -ml-2 text-muted-foreground hover:text-foreground transition-colors rounded-lg hover:bg-muted/50"
|
|
aria-label="Back to home"
|
|
>
|
|
<ArrowLeft className="w-5 h-5" />
|
|
</Link>
|
|
|
|
<form onSubmit={handleSearch} className="flex-1">
|
|
<div className="flex items-center w-full px-4 py-2.5 rounded-xl border border-border/60 bg-muted/30 hover:bg-muted/50 focus-within:bg-background focus-within:border-foreground/20 focus-within:ring-1 focus-within:ring-foreground/10 transition-all">
|
|
<Search className="w-4 h-4 text-muted-foreground mr-3 flex-shrink-0" />
|
|
<input
|
|
type="text"
|
|
value={query}
|
|
onChange={(e) => setQuery(e.target.value)}
|
|
placeholder="Search Wikipedia..."
|
|
className="flex-1 bg-transparent outline-none text-foreground placeholder:text-muted-foreground/70 text-[15px]"
|
|
autoFocus
|
|
/>
|
|
{query && (
|
|
<button
|
|
type="button"
|
|
onClick={() => setQuery('')}
|
|
className="ml-2 text-muted-foreground hover:text-foreground transition-colors text-sm"
|
|
>
|
|
Clear
|
|
</button>
|
|
)}
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
{/* Results area */}
|
|
<div className="max-w-3xl mx-auto px-6 py-8">
|
|
{loading ? (
|
|
<div className="space-y-6">
|
|
{[...Array(5)].map((_, i) => (
|
|
<div
|
|
key={i}
|
|
className="flex gap-4 animate-pulse"
|
|
style={{ animationDelay: `${i * 100}ms` }}
|
|
>
|
|
<div className="w-20 h-20 rounded-lg bg-muted/60 shrink-0" />
|
|
<div className="flex-1 py-1">
|
|
<div className="h-5 bg-muted/60 rounded-md w-2/5 mb-3" />
|
|
<div className="h-4 bg-muted/40 rounded-md w-4/5 mb-2" />
|
|
<div className="h-4 bg-muted/40 rounded-md w-3/5" />
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : results.length > 0 ? (
|
|
<div>
|
|
<p className="text-sm text-muted-foreground mb-6">
|
|
{results.length} result{results.length !== 1 ? 's' : ''} for <span className="text-foreground font-medium">"{initialQuery}"</span>
|
|
</p>
|
|
<div className="space-y-2">
|
|
{results.map((result, index) => (
|
|
<Link
|
|
key={result.title}
|
|
href={`/article/${encodeURIComponent(result.title.replace(/ /g, '_'))}`}
|
|
className="group block p-4 -mx-4 rounded-xl hover:bg-muted/40 active:bg-muted/60 transition-all duration-200"
|
|
style={{
|
|
animation: 'searchResultFadeIn 0.3s ease-out forwards',
|
|
animationDelay: `${index * 50}ms`,
|
|
opacity: 0
|
|
}}
|
|
>
|
|
<div className="flex gap-4">
|
|
{result.thumbnail ? (
|
|
<div className="relative w-20 h-20 rounded-lg overflow-hidden bg-muted shrink-0 ring-1 ring-border/50">
|
|
<Image
|
|
src={result.thumbnail.startsWith('//') ? `https:${result.thumbnail}` : result.thumbnail}
|
|
alt=""
|
|
fill
|
|
className="object-cover group-hover:scale-105 transition-transform duration-300"
|
|
/>
|
|
</div>
|
|
) : (
|
|
<div className="w-20 h-20 rounded-lg bg-muted/50 shrink-0 flex items-center justify-center ring-1 ring-border/30">
|
|
<FileText className="w-6 h-6 text-muted-foreground/50" />
|
|
</div>
|
|
)}
|
|
<div className="flex-1 min-w-0 py-0.5">
|
|
<h2 className="text-[17px] font-medium text-foreground group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors leading-snug">
|
|
{result.title}
|
|
</h2>
|
|
{result.description && (
|
|
<p className="text-[14px] text-muted-foreground line-clamp-2 mt-1.5 leading-relaxed">
|
|
{result.description}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
) : searched ? (
|
|
<div className="text-center py-16">
|
|
<div className="w-16 h-16 mx-auto mb-4 rounded-full bg-muted/50 flex items-center justify-center">
|
|
<Search className="w-7 h-7 text-muted-foreground/50" />
|
|
</div>
|
|
<p className="text-muted-foreground">
|
|
No results found for <span className="text-foreground font-medium">"{initialQuery}"</span>
|
|
</p>
|
|
<p className="text-sm text-muted-foreground/70 mt-2">
|
|
Try different keywords or check the spelling
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<div className="text-center py-16">
|
|
<div className="w-16 h-16 mx-auto mb-4 rounded-full bg-muted/50 flex items-center justify-center">
|
|
<Search className="w-7 h-7 text-muted-foreground/50" />
|
|
</div>
|
|
<p className="text-muted-foreground">
|
|
Enter a search term to find articles
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<style jsx>{`
|
|
@keyframes searchResultFadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(8px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
`}</style>
|
|
</main>
|
|
);
|
|
}
|
|
|
|
export default function SearchPage() {
|
|
return (
|
|
<Suspense fallback={
|
|
<main className="min-h-screen bg-background flex items-center justify-center">
|
|
<div className="text-muted-foreground">
|
|
<div className="w-8 h-8 border-2 border-muted-foreground/30 border-t-muted-foreground rounded-full animate-spin mx-auto mb-3" />
|
|
<span className="text-sm">Loading...</span>
|
|
</div>
|
|
</main>
|
|
}>
|
|
<SearchContent />
|
|
</Suspense>
|
|
);
|
|
}
|