63 lines
2.2 KiB
TypeScript
63 lines
2.2 KiB
TypeScript
import ButtonSecondary from "../buttons/ButtonSecondary";
|
|
import IconEmptyResults from "~/components/ui/icons/IconEmptyResults";
|
|
import clsx from "clsx";
|
|
import { PlusIcon, ReloadIcon } from "~/components/ui/icons/vendor";
|
|
|
|
interface Captions {
|
|
description?: string;
|
|
thereAreNo?: string;
|
|
new?: string;
|
|
}
|
|
|
|
interface Props {
|
|
className?: string;
|
|
captions: Captions;
|
|
to?: string;
|
|
icon?: string;
|
|
onClick?: () => void;
|
|
}
|
|
|
|
export default function EmptyState({ className, captions, to, icon, onClick }: Props) {
|
|
return (
|
|
// Subframe EmptyState layout: centered column, px-4 py-8, gap-6 stack, gap-4 text block, 48px icon, body-large title / body-default body
|
|
<div className={clsx(className, "border-border-default flex flex-col items-center gap-6 rounded-md border-2 border-dashed px-4 py-8 text-center")}>
|
|
<IconEmptyResults className="h-12 w-12" />
|
|
<div className="flex max-w-[384px] flex-col items-center gap-4">
|
|
<h3 className="text-body-large-0 font-body-large-0 text-text-neutral-primary">{captions.thereAreNo}</h3>
|
|
{captions.description && (
|
|
<p className="text-text-neutral-secondary text-body-default-regular-150 font-body-default-regular-150">{captions.description}</p>
|
|
)}
|
|
</div>
|
|
{captions.new && (
|
|
<div>
|
|
{(() => {
|
|
if (to) {
|
|
return (
|
|
<ButtonSecondary to={to}>
|
|
{(() => {
|
|
if (icon === "plus") {
|
|
return <PlusIcon className="h-4 w-4" />;
|
|
} else if (icon === "refresh") {
|
|
return <ReloadIcon className="h-4 w-4" />;
|
|
} else {
|
|
return null;
|
|
}
|
|
})()}
|
|
<div>{captions.new}</div>
|
|
</ButtonSecondary>
|
|
);
|
|
} else {
|
|
return (
|
|
<ButtonSecondary onClick={onClick} type="button">
|
|
{icon === "plus" && <PlusIcon className="h-4 w-4" />}
|
|
<div>{captions.new}</div>
|
|
</ButtonSecondary>
|
|
);
|
|
}
|
|
})()}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|