import React from 'react'; import { Head, Link } from '@inertiajs/react'; import AppLayout from '@/layouts/app-layout'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Badge } from '@/components/ui/badge'; import { ArrowLeft, Video, Image as ImageIcon } from 'lucide-react'; import { type BreadcrumbItem } from '@/types'; import { Gallery } from '@/types/admin/Gallery'; import { index, edit } from '@/routes/admin/gallery'; interface Props { gallery: Gallery; } export default function Show({ gallery }: Props) { const breadcrumbs: BreadcrumbItem[] = [ { title: 'Galleries', href: index().url }, { title: 'Details', href: '#' }, ]; // Handle image being string, array of strings, or potential null/undefined const rawImages = gallery.images; const images: string[] = Array.isArray(rawImages) ? rawImages : (typeof rawImages === 'string' ? [rawImages] : []); const isVideo = gallery.gallery_type === 'Video'; let videoSrc = gallery.video_url; if (isVideo && videoSrc) { if (videoSrc.includes("watch?v=")) { videoSrc = videoSrc.replace("watch?v=", "embed/"); if (videoSrc.includes("&")) { videoSrc = videoSrc.split("&")[0]; } } else if (videoSrc.includes("youtu.be/")) { videoSrc = videoSrc.replace("youtu.be/", "www.youtube.com/embed/"); } } return (

{gallery.title}

{gallery.status ? 'Active' : 'Inactive'} • {isVideo ?
{/* Main Content */}
Description
{gallery.description ? ( gallery.description ) : ( No description available. )}
{/* Media Display */} {isVideo && videoSrc ? ( Video