46 lines
1.3 KiB
TypeScript
46 lines
1.3 KiB
TypeScript
|
import type { LucideIcon } from "lucide-react";
|
||
|
|
import { cn } from "@/lib/utils";
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Shared empty-state panel: a brand-tinted icon tile, a title, muted
|
||
|
|
* description, and an optional call-to-action. Used across the dashboard,
|
||
|
|
* episodes, series, and API-keys surfaces.
|
||
|
|
*/
|
||
|
|
export function EmptyState({
|
||
|
|
icon: Icon,
|
||
|
|
title,
|
||
|
|
description,
|
||
|
|
action,
|
||
|
|
className,
|
||
|
|
bordered = true,
|
||
|
|
}: {
|
||
|
|
icon: LucideIcon;
|
||
|
|
title: string;
|
||
|
|
description?: string;
|
||
|
|
action?: React.ReactNode;
|
||
|
|
className?: string;
|
||
|
|
/** Wrap in a dashed border panel (default). Set false when already inside a Card. */
|
||
|
|
bordered?: boolean;
|
||
|
|
}) {
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
className={cn(
|
||
|
|
"flex flex-col items-center gap-3 px-6 py-16 text-center",
|
||
|
|
bordered && "rounded-2xl border border-dashed border-border",
|
||
|
|
className
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
<span className="flex h-14 w-14 items-center justify-center rounded-2xl bg-brand/10 text-brand">
|
||
|
|
<Icon className="h-6 w-6" />
|
||
|
|
</span>
|
||
|
|
<div className="space-y-1">
|
||
|
|
<p className="font-display text-lg font-bold tracking-tight">{title}</p>
|
||
|
|
{description && (
|
||
|
|
<p className="mx-auto max-w-md text-sm text-muted-foreground">{description}</p>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
{action && <div className="pt-1">{action}</div>}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|