Update
This commit is contained in:
165
resources/js/pages/memes/show.tsx
Normal file
165
resources/js/pages/memes/show.tsx
Normal file
@@ -0,0 +1,165 @@
|
||||
import { MemeCard } from '@/components/custom/meme-card';
|
||||
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '@/components/ui/breadcrumb';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { KeywordBadge } from '@/components/ui/keyword-badge';
|
||||
import { Spinner } from '@/components/ui/spinner';
|
||||
import Footer from '@/pages/home/partials/Footer';
|
||||
import { Link } from '@inertiajs/react';
|
||||
import { ArrowLeft } from 'lucide-react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { route } from 'ziggy-js';
|
||||
import BrandLogo from '../home/partials/BrandLogo';
|
||||
|
||||
interface MemeMedia {
|
||||
ids: string;
|
||||
name: string;
|
||||
description: string;
|
||||
keywords: string[];
|
||||
action_keywords: string[];
|
||||
emotion_keywords: string[];
|
||||
misc_keywords: string[];
|
||||
mov_url: string;
|
||||
webm_url: string;
|
||||
gif_url: string;
|
||||
webp_url: string;
|
||||
slug: string;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
meme: MemeMedia;
|
||||
relatedMemes: MemeMedia[];
|
||||
}
|
||||
|
||||
export default function MemeShow({ meme, relatedMemes }: Props) {
|
||||
const [isClient, setIsClient] = useState(false);
|
||||
const [Editor, setEditor] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
setIsClient(true);
|
||||
// Dynamically import Editor only on client-side to avoid SSR issues with Konva
|
||||
if (typeof window !== 'undefined') {
|
||||
import('@/modules/editor/editor.jsx').then((module) => {
|
||||
setEditor(() => module.default);
|
||||
});
|
||||
}
|
||||
}, []);
|
||||
|
||||
const allKeywords = [
|
||||
...(meme.keywords || []),
|
||||
...(meme.action_keywords || []),
|
||||
...(meme.emotion_keywords || []),
|
||||
...(meme.misc_keywords || []),
|
||||
].filter(Boolean);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="space-y-0 bg-neutral-50 py-6 dark:bg-black">
|
||||
<div className="container mx-auto px-4">
|
||||
<BrandLogo className="pb-2" />
|
||||
|
||||
{/* Breadcrumbs */}
|
||||
<Breadcrumb className="mb-6">
|
||||
<BreadcrumbList>
|
||||
<BreadcrumbItem>
|
||||
<BreadcrumbLink asChild>
|
||||
<Link href={route('home')}>Home</Link>
|
||||
</BreadcrumbLink>
|
||||
</BreadcrumbItem>
|
||||
<BreadcrumbSeparator />
|
||||
<BreadcrumbItem>
|
||||
<BreadcrumbLink asChild>
|
||||
<Link href={route('memes.index')}>Meme Library</Link>
|
||||
</BreadcrumbLink>
|
||||
</BreadcrumbItem>
|
||||
<BreadcrumbSeparator />
|
||||
<BreadcrumbItem>
|
||||
<BreadcrumbPage>{meme.name}</BreadcrumbPage>
|
||||
</BreadcrumbItem>
|
||||
</BreadcrumbList>
|
||||
</Breadcrumb>
|
||||
</div>
|
||||
|
||||
<div className="w-full">
|
||||
<div className="container mx-auto mb-6 space-y-2 px-4 text-center">
|
||||
<h1 className="text-foreground text-3xl font-bold">{meme.name} Meme</h1>
|
||||
<h2 className="text-muted-foreground">
|
||||
Use our video meme editor to customise your {meme.name} meme and export as MP4 video in minutes!
|
||||
</h2>
|
||||
</div>
|
||||
{isClient && Editor ? (
|
||||
<Editor
|
||||
setInitialMeme={(setMeme) => setMeme(meme)}
|
||||
//setInitialBackground={(setBackground) => setBackground(null)}
|
||||
setInitialText={(setText) => setText('add your meme caption here')}
|
||||
/>
|
||||
) : (
|
||||
<div className="flex h-96 items-center justify-center text-center">
|
||||
<div className="space-y-2">
|
||||
<Spinner />
|
||||
<div className="text-muted-foreground" data-nosnippet>
|
||||
Loading meme video editor...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="container mx-auto grid justify-center gap-5 lg:grid-cols-1" id="more-info">
|
||||
<div className="">
|
||||
{/* Keywords */}
|
||||
<Card className="h-auto">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">Know Your Meme</CardTitle>
|
||||
<CardDescription className="hidden"></CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<b>Description: </b>
|
||||
{meme.description && (
|
||||
<div className="mb-4">
|
||||
<p className="text-muted-foreground text-sm leading-relaxed">{meme.description}</p>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{allKeywords.map((keyword, index) => (
|
||||
<KeywordBadge key={index} keyword={keyword} />
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Related Memes */}
|
||||
<div className="">
|
||||
{relatedMemes.length > 0 && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">Related Memes</CardTitle>
|
||||
<CardDescription>Similar meme templates you might like</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="xs:grid-cols-2 mb-8 grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6">
|
||||
{relatedMemes.map((related) => (
|
||||
<MemeCard key={related.ids} meme={related} showKeywords={false} />
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Back to Meme Library Button */}
|
||||
<div className="mt-8 text-center">
|
||||
<Link href={route('memes.index')}>
|
||||
<Button variant="outline" size="lg" className="gap-2">
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
Back to Meme Library
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<Footer />
|
||||
{/* <AuthUser /> */}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user