66 lines
2.3 KiB
TypeScript
66 lines
2.3 KiB
TypeScript
'use client';
|
|
|
|
import { useState, FormEvent } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import { PageTransition } from '@/components/page-transition';
|
|
import { Search, Shuffle } from 'lucide-react';
|
|
|
|
export default function Home() {
|
|
const [query, setQuery] = useState('');
|
|
const router = useRouter();
|
|
|
|
const handleSearch = (e: FormEvent) => {
|
|
e.preventDefault();
|
|
if (query.trim()) {
|
|
router.push(`/search?query=${encodeURIComponent(query.trim())}`);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<main className="min-h-screen flex flex-col items-center justify-center px-6">
|
|
<div className="w-full max-w-xl text-center">
|
|
<h1 className="text-5xl sm:text-6xl font-semibold tracking-tight text-foreground mb-3">
|
|
Wiki<span className="text-neutral-400">+</span>
|
|
</h1>
|
|
|
|
<p className="text-muted-foreground mb-10">
|
|
Search the encyclopedia
|
|
</p>
|
|
|
|
<form onSubmit={handleSearch} className="w-full mb-6">
|
|
<div className="flex items-center w-full px-4 py-3 rounded-xl border border-border bg-card focus-within:border-neutral-400 transition-colors">
|
|
<Search className="w-5 h-5 text-muted-foreground mr-3 flex-shrink-0" />
|
|
<input
|
|
type="text"
|
|
value={query}
|
|
onChange={(e) => setQuery(e.target.value)}
|
|
placeholder="Search for anything..."
|
|
className="flex-1 bg-transparent outline-none text-foreground placeholder:text-muted-foreground"
|
|
autoFocus
|
|
/>
|
|
</div>
|
|
</form>
|
|
|
|
<div className="flex gap-3 justify-center">
|
|
<button
|
|
type="button"
|
|
onClick={handleSearch}
|
|
className="px-5 py-2.5 text-sm font-medium bg-foreground text-background rounded-lg hover:opacity-90 transition-opacity"
|
|
>
|
|
Search
|
|
</button>
|
|
<PageTransition href="/random">
|
|
<button
|
|
type="button"
|
|
className="px-5 py-2.5 text-sm font-medium text-muted-foreground border border-border rounded-lg hover:bg-accent hover:text-foreground transition-colors inline-flex items-center gap-2"
|
|
>
|
|
<Shuffle className="w-4 h-4" />
|
|
Random
|
|
</button>
|
|
</PageTransition>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|