From b195a9e7c3f8eb1e402872c093615afa4c7f4d9f Mon Sep 17 00:00:00 2001
From: ct <charlesteh90@gmail.com>
Date: Thu, 17 Jul 2025 02:58:01 +0800
Subject: [PATCH] Update

---
 resources/js/pages/home/home.tsx              |  3 +-
 .../pages/home/partials/MemeLibrarySearch.jsx | 80 +++++++++++++++++++
 2 files changed, 82 insertions(+), 1 deletion(-)
 create mode 100644 resources/js/pages/home/partials/MemeLibrarySearch.jsx

diff --git a/resources/js/pages/home/home.tsx b/resources/js/pages/home/home.tsx
index 82bb6f9..a30b81f 100644
--- a/resources/js/pages/home/home.tsx
+++ b/resources/js/pages/home/home.tsx
@@ -4,6 +4,7 @@ import FAQDiscord from './partials/FAQDiscord.jsx';
 import Features from './partials/Features.jsx';
 import Footer from './partials/Footer.jsx';
 import Hero from './partials/Hero.jsx';
+import MemeLibrarySearch from './partials/MemeLibrarySearch.jsx';
 
 const Home = ({ faqData }) => {
     const [isClient, setIsClient] = useState(false);
@@ -33,7 +34,7 @@ const Home = ({ faqData }) => {
             </div>
             <div className="space-y-16">
                 <Hero />
-                {/* <MemeLibrarySearch /> */}
+                <MemeLibrarySearch />
                 <Features />
                 <FAQDiscord faqData={faqData} />
             </div>
diff --git a/resources/js/pages/home/partials/MemeLibrarySearch.jsx b/resources/js/pages/home/partials/MemeLibrarySearch.jsx
new file mode 100644
index 0000000..a301257
--- /dev/null
+++ b/resources/js/pages/home/partials/MemeLibrarySearch.jsx
@@ -0,0 +1,80 @@
+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;