import { Head, Link, router } from '@inertiajs/react'; import { Search, Trash2 } from 'lucide-react'; import type { FormEvent } from 'react'; import { useState } from 'react'; import Heading from '@/components/heading'; import { Button } from '@/components/ui/button'; import { Card, CardContent } from '@/components/ui/card'; import { Input } from '@/components/ui/input'; import { dashboard } from '@/routes/admin'; import { destroy, index } from '@/routes/admin/subscribers'; type Paginated = { data: T[]; current_page: number; last_page: number; total: number; prev_page_url: string | null; next_page_url: string | null; }; type Subscriber = { id: number; email: string; created_at: string }; type Props = { subscribers: Paginated; search: string; }; export default function Subscribers({ subscribers, search }: Props) { const [query, setQuery] = useState(search); const submit = (event: FormEvent) => { event.preventDefault(); router.get(index.url(), query ? { search: query } : {}, { preserveState: true, }); }; const remove = (subscriber: Subscriber) => router.delete(destroy.url(subscriber.id), { preserveScroll: true }); return ( <>
setQuery(event.target.value)} placeholder="Search by email" className="pl-9" />
{subscribers.data.map((subscriber) => ( ))} {subscribers.data.length === 0 && ( )}
Email Subscribed
{subscriber.email} {new Date( subscriber.created_at, ).toLocaleString()}
No subscribers found.
{subscribers.last_page > 1 && (
Page {subscribers.current_page} of{' '} {subscribers.last_page}
)}
); } Subscribers.layout = { breadcrumbs: [ { title: 'Admin', href: dashboard() }, { title: 'Subscribers', href: index() }, ], };