114 lines
3.8 KiB
TypeScript
114 lines
3.8 KiB
TypeScript
'use client';
|
|
|
|
import {
|
|
Table,
|
|
TableHeader,
|
|
TableRow,
|
|
TableHead,
|
|
TableBody,
|
|
TableCell,
|
|
} from '@usesend/ui/src/table';
|
|
import { api } from '~/trpc/react';
|
|
import { useUrlState } from '~/hooks/useUrlState';
|
|
import { Button } from '@usesend/ui/src/button';
|
|
import Spinner from '@usesend/ui/src/spinner';
|
|
import { formatDistanceToNow } from 'date-fns';
|
|
// import DeleteCampaign from "./delete-campaign";
|
|
import Link from 'next/link';
|
|
// import DuplicateCampaign from "./duplicate-campaign";
|
|
|
|
import { TextWithCopyButton } from '@usesend/ui/src/text-with-copy';
|
|
import DeleteTemplate from './delete-template';
|
|
import DuplicateTemplate from './duplicate-template';
|
|
|
|
export default function TemplateList() {
|
|
const [page, setPage] = useUrlState('page', '1');
|
|
|
|
const pageNumber = Number(page);
|
|
|
|
const templateQuery = api.template.getTemplates.useQuery({
|
|
page: pageNumber,
|
|
});
|
|
|
|
return (
|
|
<div className="mt-10 flex flex-col gap-4">
|
|
<div className="border-border flex flex-col rounded-xl border shadow">
|
|
<Table className="">
|
|
<TableHeader className="">
|
|
<TableRow className="bg-muted/30">
|
|
<TableHead className="rounded-tl-xl">Name</TableHead>
|
|
<TableHead className="">ID</TableHead>
|
|
<TableHead className="">Created At</TableHead>
|
|
<TableHead className="rounded-tr-xl">Actions</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{templateQuery.isLoading ? (
|
|
<TableRow className="h-32">
|
|
<TableCell colSpan={4} className="py-4 text-center">
|
|
<Spinner
|
|
className="mx-auto h-6 w-6"
|
|
innerSvgClass="stroke-primary"
|
|
/>
|
|
</TableCell>
|
|
</TableRow>
|
|
) : templateQuery.data?.templates.length ? (
|
|
templateQuery.data?.templates.map((template) => (
|
|
<TableRow key={template.id} className="">
|
|
<TableCell className="font-medium">
|
|
<Link
|
|
className="text-foreground hover:text-foreground underline decoration-dashed underline-offset-4"
|
|
href={`/templates/${template.id}/edit`}
|
|
>
|
|
{template.name}
|
|
</Link>
|
|
</TableCell>
|
|
<TableCell>
|
|
<TextWithCopyButton
|
|
value={template.id}
|
|
className="w-[200px] overflow-hidden"
|
|
/>
|
|
</TableCell>
|
|
<TableCell className="">
|
|
{formatDistanceToNow(new Date(template.createdAt), {
|
|
addSuffix: true,
|
|
})}
|
|
</TableCell>
|
|
<TableCell>
|
|
<div className="flex gap-2">
|
|
<DuplicateTemplate template={template} />
|
|
<DeleteTemplate template={template} />
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
))
|
|
) : (
|
|
<TableRow className="h-32">
|
|
<TableCell colSpan={4} className="py-4 text-center">
|
|
No templates found
|
|
</TableCell>
|
|
</TableRow>
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
<div className="flex justify-end gap-4">
|
|
<Button
|
|
size="sm"
|
|
onClick={() => setPage((pageNumber - 1).toString())}
|
|
disabled={pageNumber === 1}
|
|
>
|
|
Previous
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
onClick={() => setPage((pageNumber + 1).toString())}
|
|
disabled={pageNumber >= (templateQuery.data?.totalPage ?? 0)}
|
|
>
|
|
Next
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|