Update

2025-07-17 03:42:55 +08:00
parent 06675de71b
commit 85917e0cdf
46 changed files with 2426 additions and 121 deletions
--- a/resources/js/pages/home/partials/MemeLibrarySearch.jsx
+++ b/resources/js/pages/home/partials/MemeLibrarySearch.jsx
@@ -0,0 +1,106 @@
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { KeywordBadge } from '@/components/ui/keyword-badge';
+import { router } from '@inertiajs/react';
+import { Search } from 'lucide-react';
+import { useState } from 'react';
+import { route } from 'ziggy-js';
+
+const MemeLibrarySearch = ({ popularKeywords = [] }) => {
+    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);
+        }
+    };
+
+    const handleKeywordClick = (keyword) => {
+        setSearchQuery(keyword);
+        setIsSearching(true);
+        router.visit(route('memes.search', { search: keyword }), {
+            onFinish: () => setIsSearching(false),
+        });
+    };
+
+    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">Find the perfect meme</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>
+
+                    {/* Popular Keywords */}
+                    {popularKeywords.length > 0 && (
+                        <div className="space-y-3">
+                            <div className="flex flex-wrap justify-center gap-2">
+                                {popularKeywords.map((keyword, index) => (
+                                    <KeywordBadge
+                                        size="lg"
+                                        key={index}
+                                        keyword={keyword}
+                                        onClick={() => handleKeywordClick(keyword)}
+                                        disabled={isSearching}
+                                    />
+                                ))}
+                            </div>
+                        </div>
+                    )}
+
+                    {/* Browse all link */}
+                    <div className="pt-4">
+                        <Button variant="outline" onClick={() => router.visit(route('memes.index'))} className="gap-2">
+                            or Browse our Meme Library
+                        </Button>
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default MemeLibrarySearch;