charlestehio/memefast
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update

Browse Source
This commit is contained in:
ct
2025-07-17 01:20:15 +08:00
parent ade86ef772
commit 947dd19dcb
11 changed files with 465 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
resources/js/pages/memes/index.tsx
View File

@@ -1,10 +1,10 @@
import { MemeCard } from '@/components/custom/meme-card';
import { Badge } from '@/components/ui/badge';
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '@/components/ui/breadcrumb';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { KeywordBadge } from '@/components/ui/keyword-badge';
import { MemeCard } from '@/components/custom/meme-card';
import Footer from '@/pages/home/partials/Footer';
import { Link, router } from '@inertiajs/react';
import { Search } from 'lucide-react';
@@ -44,9 +44,10 @@ interface Props {
filters: {
search?: string;
};
dynamicDescription?: string;
}
export default function MemesIndex({ memes, popularKeywords, filters }: Props) {
export default function MemesIndex({ memes, popularKeywords, filters, dynamicDescription }: Props) {
const [search, setSearch] = useState(filters.search || '');
const handleSearch = (e: React.FormEvent) => {
@@ -77,7 +78,7 @@ export default function MemesIndex({ memes, popularKeywords, filters }: Props) {
<div className="min-h-screen bg-neutral-50 pb-10 dark:bg-black">
<div className="container mx-auto px-4 pt-8 pb-0">
<BrandLogo className="py-3"></BrandLogo>
{/* Breadcrumbs */}
<Breadcrumb className="mb-6">
<BreadcrumbList>
@@ -88,19 +89,21 @@ export default function MemesIndex({ memes, popularKeywords, filters }: Props) {
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>
{filters.search ? `Search: ${filters.search}` : 'Meme Library'}
</BreadcrumbPage>
<BreadcrumbPage>{filters.search ? `${filters.search.charAt(0).toUpperCase() + filters.search.slice(1)} Memes` : 'Meme Library'}</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
{/* Header */}
<div className="mb-8 text-center">
<h1 className="text-foreground mb-4 text-4xl font-bold">Meme Library</h1>
<h1 className="text-foreground mb-4 text-4xl font-bold">
{filters.search ? `${filters.search.charAt(0).toUpperCase() + filters.search.slice(1)} Memes` : 'Meme Library'}
</h1>
<p className="text-muted-foreground mx-auto max-w-2xl text-xl">
Thousands of memes ready for TikTok, Reels, Threads and YouTube Shorts. No signup needed - click any meme to start
creating!
{filters.search
? (dynamicDescription || `Discover ${filters.search} meme templates and create viral content for TikTok, Instagram Reels, and YouTube Shorts.`)
: 'Thousands of memes ready for TikTok, Reels, Threads and YouTube Shorts. No signup needed - click any meme to start creating!'
}
</p>
</div>
@@ -131,7 +134,7 @@ export default function MemesIndex({ memes, popularKeywords, filters }: Props) {
{/* Popular Keywords */}
<div className="mt-4">
<h3 className="text-foreground mb-3 text-sm font-medium">Popular Keywords</h3>
<h2 className="text-foreground mb-3 text-sm font-medium">Popular Keywords</h2>
<div className="flex flex-wrap gap-2">
{popularKeywords.map((keyword) => (
<KeywordBadge key={keyword} keyword={keyword} size="lg" />