import { useTranslation } from '@/hooks/use-translation'; import AppLayout from '@/layouts/app-layout'; import { Head, router, useForm } from '@inertiajs/react'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Card, CardContent } from '@/components/ui/card'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from '@/components/ui/dialog'; import { type BreadcrumbItem } from '@/types'; import { Copy, Trash2, Upload } from 'lucide-react'; import { useState } from 'react'; interface HtmlAsset { id: number; name: string; filename: string; url: string; storage_provider: 'local' | 'cloudflare' | 's3' | 'azure'; mime_type: string; file_size: number; width: number | null; height: number | null; alt_text: string | null; } interface Props { assets: HtmlAsset[]; } export default function HtmlAssetsIndex({ assets }: Readonly) { const { t } = useTranslation(); const [showUploadDialog, setShowUploadDialog] = useState(false); const [copiedUrl, setCopiedUrl] = useState(null); const { data, setData, post, processing, reset } = useForm({ file: null as File | null, alt_text: '', }); const breadcrumbs: BreadcrumbItem[] = [ { title: 'Dashboard', href: '/dashboard' }, { title: 'HTML Publisher', href: '/admin/html-pages' }, { title: 'Assets', href: '/admin/html-assets' }, ]; const handleUpload = (e: React.FormEvent) => { e.preventDefault(); const formData = new FormData(); if (data.file) { formData.append('file', data.file); } if (data.alt_text) { formData.append('alt_text', data.alt_text); } router.post('/admin/html-assets', formData, { forceFormData: true, onSuccess: () => { setShowUploadDialog(false); reset(); }, }); }; const handleDelete = (id: number) => { if (confirm('Are you sure you want to delete this asset?')) { router.delete(`/admin/html-assets/${id}`); } }; const handleCopyUrl = (url: string) => { navigator.clipboard.writeText(url); setCopiedUrl(url); setTimeout(() => setCopiedUrl(null), 2000); }; const formatFileSize = (bytes: number) => { if (bytes < 1024) return bytes + ' B'; if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB'; return (bytes / (1024 * 1024)).toFixed(1) + ' MB'; }; return (

{t('Asset Library')}

{assets.length === 0 ? (

{t('No assets uploaded yet')}

) : (

{assets.map((asset) => (

{asset.mime_type?.startsWith('image/') ? ( ${asset.alt_text$ ) : (

📄

)}

{asset.name}

{formatFileSize(asset.file_size)}

{asset.width && asset.height && (

{asset.width} × {asset.height}

)}

{asset.storage_provider}

))}

)}

); }