import { Head, router, useForm, usePage } from '@inertiajs/react'; import { Archive, ArchiveRestore, Pencil, Trash2 } from 'lucide-react'; import { FormEvent, useState } from 'react'; import { Button, EmptyState, Field, Input, Modal, PageHeader, Pagination, Select } from '@/Components/ui'; import AppLayout from '@/Layouts/AppLayout'; import { confirmAction } from '@/lib/confirm'; import { formatDate } from '@/lib/utils'; import { tone, type SharedProps } from '@/types'; interface InspirationCard { id: number; name: string | null; url: string; embed_url: string | null; kind: 'iframe' | 'video' | null; created_at: string | null; can_edit: boolean; can_delete: boolean; platform: { id: number; name: string; slug: string; color: string } | null; user: { id: number; name: string } | null; } export default function InspirationIndex({ items, canSave, archived = false, }: { items: { data: InspirationCard[]; prev: string | null; next: string | null; total: number; from?: number | null; to?: number | null }; canSave: boolean; archived?: boolean; }) { const platforms = usePage().props.lookups?.platforms ?? []; const instagram = platforms.find((platform) => platform.slug === 'instagram'); const form = useForm({ name: '', platform_id: instagram ? String(instagram.id) : (platforms[0] ? String(platforms[0].id) : ''), url: '' }); const editForm = useForm({ name: '', platform_id: '', url: '' }); const [viewing, setViewing] = useState(null); const [editing, setEditing] = useState(null); function openEdit(item: InspirationCard) { editForm.setData({ name: item.name ?? '', platform_id: item.platform ? String(item.platform.id) : '', url: item.url, }); editForm.clearErrors(); setEditing(item); } function saveEdit(event: FormEvent) { event.preventDefault(); if (!editing) { return; } editForm.put(`/inspiration/${editing.id}`, { preserveScroll: true, onSuccess: () => setEditing(null), }); } function save(event: FormEvent) { event.preventDefault(); form.post('/inspiration', { preserveScroll: true, onSuccess: () => form.reset('name', 'url') }); } return (
{canSave && !archived && (
form.setData('name', event.target.value)} placeholder="Cafe reel" required /> form.setData('url', event.target.value)} placeholder="https://www.instagram.com/reel/..." required />
)} {items.data.length === 0 ? : (
{items.data.map((item) => (
{item.platform?.name ?? 'Platform'}
{formatDate(item.created_at)} {item.can_edit && ( )} {item.can_edit && !archived && ( )} {item.can_delete && ( )}

{item.name || item.platform?.name || 'Saved video'}

{item.url}

{item.user?.name}

))}
)} { if (!open) setViewing(null); }} title={viewing?.name || viewing?.platform?.name || 'Inspiration'} contentClassName="w-[min(100%-1rem,28rem)]"> {viewing?.kind === 'video' && viewing.embed_url && (