import { useState } from 'react'; import { Head, Link, useForm } from '@inertiajs/react'; import { router } from '@inertiajs/react'; import { ConfirmDialog } from '@/components/admin/confirm-dialog'; import { ImageUpload } from '@/components/admin/image-upload'; import { RichText } from '@/components/admin/rich-text'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; interface Video { id: number; title: string; youtube_url: string; description: string | null; thumbnail_url: string | null; } export default function VideoEdit({ video }: { video: Video }) { const [imageKey, setImageKey] = useState(0); const [confirmDelete, setConfirmDelete] = useState(false); const { data, setData, post, processing, errors } = useForm({ _method: 'PUT', title: video.title, youtube_url: video.youtube_url, description: video.description ?? '', thumbnail_url: null as File | null, thumbnail_url_clear: false, }); function submit(e: React.FormEvent) { e.preventDefault(); post(`/admin/videos/${video.id}`); } return ( <>

Videos / Edit Video

Edit Video

Title * setData('title', e.target.value)} required /> {errors.title &&

{errors.title}

}

YouTube URL * setData('youtube_url', e.target.value)} required /> {errors.youtube_url &&

{errors.youtube_url}

}

Description setData('description', v)} height={250} /> {errors.description &&

{errors.description}

}

Thumbnail { setData('thumbnail_url', file); setData('thumbnail_url_clear', false); }} onClear={() => { setData('thumbnail_url', null); setData('thumbnail_url_clear', true); setImageKey((k) => k + 1); }} />

router.delete(`/admin/videos/${video.id}`, { onSuccess: () => setConfirmDelete(false) })} /> ); }