import { Head } from '@inertiajs/react'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { Badge } from '@/components/ui/badge'; import { ArrowLeft, Play, Download, Share2 } from 'lucide-react'; import { Link } from '@inertiajs/react'; import { route } from 'ziggy-js'; 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 allKeywords = [ ...(meme.keywords || []), ...(meme.action_keywords || []), ...(meme.emotion_keywords || []), ...(meme.misc_keywords || []) ].filter(Boolean); return ( <>

{/* Header */}

{meme.name}

{meme.description}

{/* Main Content */}

{/* Video Preview */}

{/* Action Buttons */}

{/* Sidebar */}

{/* Keywords */} Keywords Related keywords for this meme template

{meme.action_keywords?.map((keyword, index) => ( {keyword} ))} {meme.emotion_keywords?.map((keyword, index) => ( {keyword} ))} {meme.misc_keywords?.map((keyword, index) => ( {keyword} ))}

{/* Related Memes */} {relatedMemes.length > 0 && ( Related Memes Similar meme templates you might like

{relatedMemes.map((related) => (

{related.name}

{related.name}

))}

)}

); }