Update

resources/js/pages/home/home.tsx

@@ -6,7 +6,7 @@ import Footer from './partials/Footer.jsx';
 import Hero from './partials/Hero.jsx';
 import MemeLibrarySearch from './partials/MemeLibrarySearch.jsx';
 
-const Home = ({ faqData }) => {
+const Home = ({ faqData, popularKeywords }) => {
     const [isClient, setIsClient] = useState(false);
     const [Editor, setEditor] = useState(null);
 
@@ -34,7 +34,7 @@ const Home = ({ faqData }) => {
             </div>
             <div className="space-y-16">
                 <Hero />
-                <MemeLibrarySearch />
+                <MemeLibrarySearch popularKeywords={popularKeywords} />
                 <Features />
                 <FAQDiscord faqData={faqData} />
             </div>

resources/js/pages/home/partials/MemeLibrarySearch.jsx

@@ -1,11 +1,12 @@
 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 = () => {
+const MemeLibrarySearch = ({ popularKeywords = [] }) => {
     const [searchQuery, setSearchQuery] = useState('');
     const [isSearching, setIsSearching] = useState(false);
 
@@ -32,13 +33,21 @@ const MemeLibrarySearch = () => {
         }
     };
 
+    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">Explore Our Meme Library</h2>
+                        <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>
@@ -65,10 +74,27 @@ const MemeLibrarySearch = () => {
                         </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">
-                            Browse our Meme Library
+                            or Browse our Meme Library
                         </Button>
                     </div>
                 </div>