Empty State — fixtures

1import { createElement, type ReactNode } from "react";
2import type { EmptyStateVariant } from "./types";
3 
4/** Per-variant sample copy for the docs demo. Copy is host-domain in real usage — see Q2. */
5export const EMPTY_STATE_DUMMY_COPY: Record<
6  EmptyStateVariant,
7  { title: string; description: string }
8> = {
9  default: {
10    title: "No projects yet",
11    description: "Projects you create will show up here.",
12  },
13  search: {
14    title: "No results for “gantt”",
15    description: "Try a different term or clear the active filters.",
16  },
17  error: {
18    title: "Couldn't load this page",
19    description: "Something went wrong on our end. Try again in a moment.",
20  },
21  offline: {
22    title: "You're offline",
23    description: "Changes will sync automatically once you're back online.",
24  },
25  permission: {
26    title: "You don't have access",
27    description: "Ask a workspace admin to grant you access to this board.",
28  },
29  "first-use": {
30    title: "Upload your first file",
31    description: "Drag and drop anywhere, or browse from your device.",
32  },
33};
34 
35/**
36 * Small inline SVG illustration for the media-slot demo tab. Built with
37 * `createElement` (not JSX) because this file ships as plain `.ts` — see
38 * plan P-F4: the demo imports this rather than duplicating an inline node.
39 * `currentColor` only, no hex/rgb — inherits `text-muted-foreground`.
40 */
41export const EMPTY_STATE_DUMMY_ILLUSTRATION: ReactNode = createElement(
42  "svg",
43  {
44    viewBox: "0 0 96 72",
45    className: "h-24 w-32 text-muted-foreground",
46    fill: "none",
47    xmlns: "http://www.w3.org/2000/svg",
48  },
49  createElement("rect", {
50    x: 4,
51    y: 14,
52    width: 88,
53    height: 54,
54    rx: 8,
55    stroke: "currentColor",
56    strokeOpacity: 0.35,
57    strokeWidth: 2,
58  }),
59  createElement("path", {
60    d: "M4 50 L28 32 L46 46 L64 26 L92 48",
61    stroke: "currentColor",
62    strokeOpacity: 0.55,
63    strokeWidth: 2,
64    strokeLinecap: "round",
65    strokeLinejoin: "round",
66  }),
67  createElement("circle", {
68    cx: 30,
69    cy: 26,
70    r: 6,
71    className: "fill-primary/70",
72  }),
73);