81 lines
3.2 KiB
JavaScript
81 lines
3.2 KiB
JavaScript
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import { router } from '@inertiajs/react';
|
|
import { Search } from 'lucide-react';
|
|
import { useState } from 'react';
|
|
import { route } from 'ziggy-js';
|
|
|
|
const MemeLibrarySearch = () => {
|
|
const [searchQuery, setSearchQuery] = useState('');
|
|
const [isSearching, setIsSearching] = useState(false);
|
|
|
|
const handleSearch = (e) => {
|
|
e.preventDefault();
|
|
|
|
if (!searchQuery.trim()) {
|
|
// If empty search, go to main meme library
|
|
router.visit(route('memes.index'));
|
|
return;
|
|
}
|
|
|
|
setIsSearching(true);
|
|
|
|
// Navigate to search results page
|
|
router.visit(route('memes.search', { search: searchQuery.trim() }), {
|
|
onFinish: () => setIsSearching(false),
|
|
});
|
|
};
|
|
|
|
const handleKeyPress = (e) => {
|
|
if (e.key === 'Enter') {
|
|
handleSearch(e);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<section className="relative">
|
|
<div className="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
|
|
<div className="space-y-6 text-center">
|
|
{/* Section heading */}
|
|
<div className="space-y-2">
|
|
<h2 className="text-foreground text-3xl font-bold tracking-tight sm:text-4xl">Explore Our Meme Library</h2>
|
|
<p className="text-muted-foreground mx-auto max-w-2xl text-lg">
|
|
Search through our database of popular meme templates and find the perfect one for your video
|
|
</p>
|
|
</div>
|
|
|
|
{/* Search form */}
|
|
<form onSubmit={handleSearch} className="mx-auto max-w-xl">
|
|
<div className="flex gap-2">
|
|
<div className="relative flex-1">
|
|
<Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
|
|
<Input
|
|
type="text"
|
|
placeholder="Search memes... "
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
onKeyPress={handleKeyPress}
|
|
className="h-12 py-3 pr-4 pl-10 text-base"
|
|
disabled={isSearching}
|
|
/>
|
|
</div>
|
|
<Button type="submit" size="lg" disabled={isSearching} className="h-12 px-6">
|
|
{isSearching ? 'Searching...' : 'Search'}
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
|
|
{/* Browse all link */}
|
|
<div className="pt-4">
|
|
<Button variant="outline" onClick={() => router.visit(route('memes.index'))} className="gap-2">
|
|
Browse our Meme Library
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default MemeLibrarySearch;
|