Repository Public
1/**2 * Small drawn 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-brand-2)';7const B = 'var(--color-brand-1)';8const C = 'var(--color-brand-3)';9const S = 'var(--color-surface)';10const L = 'var(--color-line-3)';11const T = 'var(--color-surface-2)';12const I = 'var(--color-info)';1314/** An empty in-tray with a check mark rising out of it: "nothing needs you". */15export function IllusAllClear() {16 return (17 <svg {...base}>18 <circle cx="92" cy="24" r="13" fill={B} opacity=".9" />19 <path d="M22 50l10-22a6 6 0 015.5-3.5h45A6 6 0 0188 28l10 22v20a8 8 0 01-8 8H30a8 8 0 01-8-8z" fill={S} stroke={L} strokeWidth="1.5" />20 <path d="M22 50h22a4 4 0 014 4 8 8 0 008 8h8a8 8 0 008-8 4 4 0 014-4h22" fill="none" stroke={L} strokeWidth="1.5" />21 <path d="M22 51h22a3 3 0 013 3 9 9 0 009 9h8a9 9 0 009-9 3 3 0 013-3h22v19a8 8 0 01-8 8H30a8 8 0 01-8-8z" fill={T} />22 <circle cx="60" cy="33" r="12" fill={A} />23 <path d="M54.5 33.4l3.8 3.8 7.4-7.8" fill="none" stroke="#fff" strokeWidth="3.2" strokeLinecap="round" strokeLinejoin="round" />24 </svg>25 );26}27/** One node delegating to three: missions / orchestration. */28export function IllusMission() {29 return (30 <svg {...base}>31 <path d="M34 48C58 48 54 22 84 22M34 48h50M34 48c24 0 20 26 50 26" fill="none" stroke={L} strokeWidth="2.5" strokeLinecap="round" />32 <rect x="14" y="30" width="36" height="36" rx="11" fill={A} />33 <path d="M26 42l7 6-7 6" fill="none" stroke="#fff" strokeWidth="3.4" strokeLinecap="round" strokeLinejoin="round" />34 <rect x="78" y="10" width="26" height="24" rx="8" fill={S} stroke={L} strokeWidth="1.5" />35 <rect x="78" y="36" width="26" height="24" rx="8" fill={S} stroke={L} strokeWidth="1.5" />36 <rect x="78" y="62" width="26" height="24" rx="8" fill={S} stroke={L} strokeWidth="1.5" />37 <circle cx="91" cy="22" r="4.5" fill={B} /><circle cx="91" cy="48" r="4.5" fill={C} /><circle cx="91" cy="74" r="4.5" fill={I} />38 </svg>39 );40}41/** A folder with sheets: projects. */42export function IllusFolder() {43 return (44 <svg {...base}>45 <rect x="34" y="16" width="50" height="40" rx="8" fill={T} transform="rotate(-7 59 36)" />46 <rect x="42" y="14" width="50" height="40" rx="8" fill={S} stroke={L} strokeWidth="1.5" transform="rotate(5 67 34)" />47 <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} />48 <rect x="30" y="58" width="30" height="6" rx="3" fill="#fff" opacity=".9" />49 <circle cx="92" cy="60" r="5" fill={B} />50 </svg>51 );52}53/** A shield over rule rows: policy. */54export function IllusPolicy() {55 return (56 <svg {...base}>57 <rect x="14" y="22" width="70" height="56" rx="12" fill={S} stroke={L} strokeWidth="1.5" />58 <rect x="26" y="35" width="34" height="6" rx="3" fill={T} /><rect x="26" y="48" width="46" height="6" rx="3" fill={T} /><rect x="26" y="61" width="24" height="6" rx="3" fill={T} />59 <path d="M86 20l20 7v15c0 13-8.500 22-20 27-11.500-5-20-14-20-27V27z" fill={A} />60 <path d="M77.500 42.500l6 6 11-12" fill="none" stroke="#fff" strokeWidth="3.4" strokeLinecap="round" strokeLinejoin="round" />61 </svg>62 );63}64/** Bars on a baseline: spend. */65export function IllusSpend() {66 return (67 <svg {...base}>68 <rect x="14" y="16" width="92" height="64" rx="14" fill={S} stroke={L} strokeWidth="1.5" />69 <path d="M26 66h68" stroke={L} strokeWidth="1.5" strokeLinecap="round" />70 <rect x="30" y="50" width="9" height="16" rx="3" fill={T} /><rect x="44" y="42" width="9" height="24" rx="3" fill={T} />71 <rect x="58" y="46" width="9" height="20" rx="3" fill={T} /><rect x="72" y="32" width="9" height="34" rx="3" fill={A} />72 <path d="M26 30h68" stroke={C} strokeWidth="1.5" strokeDasharray="3 4" strokeLinecap="round" />73 </svg>74 );75}76