Repository Public
1/**2 * Small abstract illustrations for empty states. Geometric and brand-coloured (tokens, so they3 * follow the theme). Decorative only: always aria-hidden.4 */5const base = { viewBox: '0 0 120 96', 'aria-hidden': true, className: 'h-24 w-[120px]' } as const;6const A = 'var(--color-accent)';7const V = 'var(--color-accent-2)';8const C = 'var(--color-coral)';9const S = 'var(--color-surface)';10const L = 'var(--color-line-3)';11const T = 'var(--color-surface-2)';1213/** A terminal window with a prompt and a rising sun: "nothing running yet". */14export function IllusTerminal() {15 return (16 <svg {...base}>17 <circle cx="92" cy="26" r="16" fill={C} opacity=".9" />18 <rect x="14" y="24" width="84" height="56" rx="12" fill={S} stroke={L} strokeWidth="1.5" />19 <rect x="14" y="24" width="84" height="15" rx="12" fill={T} />20 <circle cx="25" cy="31.5" r="2.5" fill={L} /><circle cx="33" cy="31.5" r="2.5" fill={L} />21 <path d="M27 51l8 6.5-8 6.5" fill="none" stroke={A} strokeWidth="4" strokeLinecap="round" strokeLinejoin="round" />22 <rect x="41" y="60" width="16" height="4.5" rx="2.25" fill={V} />23 </svg>24 );25}26/** Stacked cards with a check: "all caught up". */27export function IllusDone() {28 return (29 <svg {...base}>30 <rect x="30" y="18" width="68" height="44" rx="12" fill={T} transform="rotate(6 64 40)" />31 <rect x="22" y="26" width="72" height="46" rx="12" fill={S} stroke={L} strokeWidth="1.5" />32 <circle cx="58" cy="49" r="13" fill={A} />33 <path d="M52 49.5l4.2 4.2 8-8.4" fill="none" stroke="#fff" strokeWidth="3.4" strokeLinecap="round" strokeLinejoin="round" />34 <circle cx="98" cy="70" r="6" fill={C} /><circle cx="18" cy="20" r="4" fill={V} opacity=".7" />35 </svg>36 );37}38/** Bars that step upward: tasks / activity. */39export function IllusTasks() {40 return (41 <svg {...base}>42 <rect x="16" y="20" width="88" height="60" rx="14" fill={S} stroke={L} strokeWidth="1.5" />43 <rect x="28" y="34" width="40" height="7" rx="3.5" fill={A} /><rect x="28" y="47" width="58" height="7" rx="3.5" fill={T} />44 <rect x="28" y="60" width="26" height="7" rx="3.5" fill={V} opacity=".8" />45 <circle cx="94" cy="24" r="11" fill={C} /><path d="M94 18.5V24l3.6 2.4" fill="none" stroke="#fff" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round" />46 </svg>47 );48}49/** A folder with sheets: files / projects. */50export function IllusFolder() {51 return (52 <svg {...base}>53 <rect x="34" y="16" width="50" height="40" rx="8" fill={T} transform="rotate(-7 59 36)" />54 <rect x="42" y="14" width="50" height="40" rx="8" fill={S} stroke={L} strokeWidth="1.5" transform="rotate(5 67 34)" />55 <path d="M18 40a10 10 0 0110-10h18l8 8h38a10 10 0 0110 10v22a10 10 0 01-10 10H28a10 10 0 01-10-10z" fill={A} />56 <rect x="30" y="58" width="30" height="6" rx="3" fill="#fff" opacity=".85" />57 <circle cx="92" cy="60" r="5" fill={C} />58 </svg>59 );60}61/** Connected nodes: cluster. */62export function IllusNodes() {63 return (64 <svg {...base}>65 <path d="M60 30L30 64M60 30l30 34M30 64h60" stroke={L} strokeWidth="2" strokeDasharray="3 4" fill="none" />66 <rect x="44" y="14" width="32" height="32" rx="10" fill={A} />67 <rect x="16" y="52" width="28" height="28" rx="9" fill={S} stroke={L} strokeWidth="1.5" /><rect x="76" y="52" width="28" height="28" rx="9" fill={S} stroke={L} strokeWidth="1.5" />68 <circle cx="30" cy="66" r="5" fill={V} /><circle cx="90" cy="66" r="5" fill={C} /><circle cx="60" cy="30" r="5" fill="#fff" />69 </svg>70 );71}72