// ────────────────────────────────────────────────────────────────── // Empty-state designs. // Each has a tactical metaphor — not generic "no items" illustrations. // · Gallery / SavedDesigns — "blank canvas waiting" // · OrderHistory — "step on the mat" diagram // · Notifications — "quiet on the line" status grid // · MatchHistory — "no record yet" timeline // ────────────────────────────────────────────────────────────────── const EmptyShell = ({ title, overline, body, action, children }) => (
{children}
{overline}
{title}

{body}

{action &&
{action}
}
); // Saved designs empty — wireframe singlet with dashed cuts const EmptySavedDesigns = ({ onAction }) => ( } onClick={onAction} />} > DRAFT · 000 ); const CornerMarkSVG = ({ x, y, flipX, flipY }) => { const sx = flipX ? -1 : 1; const sy = flipY ? -1 : 1; return ( ); }; // Order history empty — ruler with no marks const EmptyOrderHistory = ({ onAction }) => ( } onClick={onAction} />} >
QUEUE SHIPPED
{/* Pipeline ruler */}
{[0, 25, 50, 75, 100].map((pct) => (
))}
No orders on the line · 0 / 0
); // Notifications empty — "all clear" status grid const EmptyNotifications = ({ onAction }) => ( } /> } >
{Array.from({ length: 9 }).map((_, i) => (
))}
); // Match history empty — empty record card const EmptyMatchHistory = ({ onAction }) => ( } onClick={onAction} />} >
RECORD · CARD -.-.--
{["W", "L", "D"].map((k) => (
0
{k}
))}
); Object.assign(window, { EmptyShell, EmptySavedDesigns, EmptyOrderHistory, EmptyNotifications, EmptyMatchHistory, });