39 lines
993 B
TypeScript
39 lines
993 B
TypeScript
import type { ReactNode } from "react";
|
|
import type { LucideIcon } from "lucide-react";
|
|
|
|
import { cn } from "@/lib/ui/variants";
|
|
|
|
interface EmptyStateProps {
|
|
icon: LucideIcon;
|
|
title: string;
|
|
description: string;
|
|
action?: ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
export function EmptyState({
|
|
icon: Icon,
|
|
title,
|
|
description,
|
|
action,
|
|
className,
|
|
}: EmptyStateProps) {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"rounded border border-dashed border-line bg-panel/70 px-6 py-10 text-center",
|
|
className,
|
|
)}
|
|
>
|
|
<div className="mx-auto mb-3 flex h-10 w-10 items-center justify-center rounded bg-[var(--color-cinnabar-wash)] text-cinnabar">
|
|
<Icon className="h-5 w-5" aria-hidden="true" />
|
|
</div>
|
|
<h2 className="font-serif text-lg text-ink">{title}</h2>
|
|
<p className="mx-auto mt-2 max-w-md text-sm leading-6 text-ink-soft">
|
|
{description}
|
|
</p>
|
|
{action ? <div className="mt-4">{action}</div> : null}
|
|
</div>
|
|
);
|
|
}
|