145 lines
4.7 KiB
TypeScript
145 lines
4.7 KiB
TypeScript
import dayjs from "dayjs";
|
|
import { motion } from "framer-motion";
|
|
import { LayoutTemplate, Plus } from "lucide-react";
|
|
import Link from "next/link";
|
|
import React from "react";
|
|
import { Alert, Badge, Card, Empty, Skeleton } from "../../components";
|
|
import { Dashboard } from "../../layouts";
|
|
import { useTemplates } from "../../lib/hooks/templates";
|
|
|
|
/**
|
|
*
|
|
*/
|
|
export default function Index() {
|
|
const { data: templates } = useTemplates();
|
|
|
|
return (
|
|
<>
|
|
<Dashboard>
|
|
{templates?.length === 0 && (
|
|
<Alert type={"info"} title={"Need a hand?"}>
|
|
<div className={"mt-3 grid items-center sm:grid-cols-4"}>
|
|
<p className={"sm:col-span-3"}>
|
|
Want us to help you get started? We can help you build your first action in less than 5 minutes.
|
|
</p>
|
|
|
|
<Link
|
|
href={"/onboarding/actions"}
|
|
className={
|
|
"inline-block rounded bg-neutral-800 px-6 py-2 text-center text-sm font-medium text-white sm:col-span-1"
|
|
}
|
|
>
|
|
Build an action
|
|
</Link>
|
|
</div>
|
|
</Alert>
|
|
)}
|
|
|
|
<Card
|
|
title={"Templates"}
|
|
description={"Reusable blueprints of your emails"}
|
|
actions={
|
|
<>
|
|
<Link href={"templates/new"} passHref>
|
|
<motion.button
|
|
whileHover={{ scale: 1.05 }}
|
|
whileTap={{ scale: 0.9 }}
|
|
className={
|
|
"flex items-center gap-x-1 rounded bg-neutral-800 px-8 py-2 text-center text-sm font-medium text-white"
|
|
}
|
|
>
|
|
<Plus strokeWidth={1.5} size={18} />
|
|
New
|
|
</motion.button>
|
|
</Link>
|
|
</>
|
|
}
|
|
>
|
|
{templates ? (
|
|
templates.length > 0 ? (
|
|
<>
|
|
<div className={"grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3"}>
|
|
{templates
|
|
.sort((a, b) => {
|
|
if (a.actions.length > 0 && b.actions.length === 0) {
|
|
return -1;
|
|
}
|
|
if (a.actions.length === 0 && b.actions.length > 0) {
|
|
return 1;
|
|
}
|
|
if (a.subject < b.subject) {
|
|
return -1;
|
|
}
|
|
if (a.subject > b.subject) {
|
|
return 1;
|
|
}
|
|
return 0;
|
|
})
|
|
.map((t) => {
|
|
return (
|
|
<>
|
|
<div
|
|
className="col-span-1 divide-y divide-neutral-200 rounded border border-neutral-200 bg-white"
|
|
key={t.id}
|
|
>
|
|
<div className="flex w-full items-center justify-between space-x-6 p-6">
|
|
<span className="inline-flex rounded bg-neutral-100 p-3 text-neutral-800 ring-4 ring-white">
|
|
<LayoutTemplate size={20} />
|
|
</span>
|
|
<div className="flex-1 truncate">
|
|
<div className="flex items-center space-x-3">
|
|
<h3 className="truncate text-sm font-medium text-neutral-800">{t.subject}</h3>
|
|
{t.actions.length > 0 && <Badge type={"success"}>Active</Badge>}
|
|
</div>
|
|
<p className="mt-1 truncate text-sm text-neutral-500">Last edited {dayjs().to(t.updatedAt)}</p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div className="-mt-px flex divide-x divide-neutral-200">
|
|
<div className="flex w-0 flex-1">
|
|
<Link
|
|
href={`/templates/${t.id}`}
|
|
className="relative -mr-px inline-flex w-0 flex-1 items-center justify-center rounded-bl border border-transparent py-4 text-sm font-medium text-neutral-800 transition hover:bg-neutral-50 hover:text-neutral-700"
|
|
>
|
|
<svg width="24" height="24" fill="none" viewBox="0 0 24 24">
|
|
<path
|
|
stroke="currentColor"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="1.5"
|
|
d="M4.75 19.25L9 18.25L18.2929 8.95711C18.6834 8.56658 18.6834 7.93342 18.2929 7.54289L16.4571 5.70711C16.0666 5.31658 15.4334 5.31658 15.0429 5.70711L5.75 15L4.75 19.25Z"
|
|
/>
|
|
<path
|
|
stroke="currentColor"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="1.5"
|
|
d="M19.25 19.25H13.75"
|
|
/>
|
|
</svg>
|
|
|
|
<span className="ml-3">Edit</span>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
})}
|
|
</div>
|
|
</>
|
|
) : (
|
|
<>
|
|
<Empty title={"No templates here"} description={"Try creating a new email blueprint for your actions"} />
|
|
</>
|
|
)
|
|
) : (
|
|
<Skeleton type={"table"} />
|
|
)}
|
|
</Card>
|
|
</Dashboard>
|
|
</>
|
|
);
|
|
}
|