EmptyState

1"use client";
2 
3import type { ComponentProps, ReactNode } from "react";
4 
5import { cn } from "@/lib/utils";
6 
7export type EmptyStateProps = Omit<ComponentProps<"div">, "title"> & {
8  /** One line naming what's missing, e.g. "No apps yet". */
9  title: ReactNode;
10  /** Optional supporting line explaining how the space fills. */
11  description?: ReactNode;
12  /** Replace the faded Neon mark, e.g. with an icon. */
13  icon?: ReactNode;
14  /** Optional call to action, e.g. a Button. */
15  action?: ReactNode;
16  /** Vertical breathing room. */
17  size?: "sm" | "md" | "lg";
18  /**
19   * "panel" draws the dashed frame and stripe wash; "bare" drops both for
20   * embedding inside an already-bordered surface, e.g. a chat pane.
21   */
22  variant?: "panel" | "bare";
23};
24 
25/* ─────────────────────────────────────────────────────────
26 * An intentional empty state, not an absence. Three moves
27 * from the Neon identity mark the space as "waiting":
28 *
29 *  texture   faint 45° hairline stripes wash the panel —
30 *            the same fill MetricCard draws under trends,
31 *            here reading as unclaimed ground
32 *  mark      the Neon mark faded to a watermark — the
33 *            brand holding the space open
34 *  type      one foreground line, one muted line, action
35 *            last; everything else stays quiet
36 * ───────────────────────────────────────────────────────── */
37const SIZE_PADDING: Record<NonNullable<EmptyStateProps["size"]>, string> = {
38  lg: "px-8 py-20",
39  md: "px-6 py-14",
40  sm: "px-4 py-8",
41};
42 
43/** Official Neon mark, from the published brand SVG (viewBox 0 0 31.3 31.6). */
44const NEON_MARK_PATH =
45  "M31.3,0v31.6l-12.2-10.6v10.6H0V0h31.3ZM3.8,27.7h11.4v-15.2l12.2,10.8V3.8H3.8s0,23.9,0,23.9Z";
46 
47/** The Neon mark, faded into the panel like a watermark. */
48const FadedMark = () => (
49  <svg
50    aria-hidden="true"
51    className="size-5 fill-muted-foreground/30"
52    viewBox="0 0 31.3 31.6"
53    xmlns="http://www.w3.org/2000/svg"
54  >
55    <path d={NEON_MARK_PATH} />
56  </svg>
57);
58 
59export const EmptyState = ({
60  action,
61  className,
62  description,
63  icon,
64  size = "md",
65  title,
66  variant = "panel",
67  ...props
68}: EmptyStateProps) => (
69  <div
70    className={cn(
71      "relative isolate flex flex-col items-center justify-center text-center",
72// … truncated