d5e4ebee5d
API layer for sandbox app 434 (three workflows: Order Booking, Store, Daily Reports) — ZinoClient, per-workflow client singletons, config ids, types, and the source API docs. Component library (Tailwind v4 + design tokens): buttons, reusable (Card/Badge/Input/Select/Pagination/Modal/Spinner/EmptyState), generic + wired record views (rv) and detail views (dv). Screens + routing (react-router v7): login gate, auth-guarded console shell with tab nav, and deep-linkable record/detail routes. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
25 lines
842 B
TypeScript
25 lines
842 B
TypeScript
import type { ReactNode } from 'react';
|
|
import { cn } from '../../lib/cn';
|
|
|
|
export interface EmptyStateProps {
|
|
/** Optional leading icon. */
|
|
icon?: ReactNode;
|
|
title: string;
|
|
hint?: string;
|
|
/** Optional action (e.g. a Button). */
|
|
action?: ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
/** Centered placeholder for empty lists / error fallbacks. */
|
|
export function EmptyState({ icon, title, hint, action, className }: EmptyStateProps) {
|
|
return (
|
|
<div className={cn('flex flex-col items-center justify-center gap-2 px-6 py-12 text-center', className)}>
|
|
{icon && <div className="text-faint mb-1">{icon}</div>}
|
|
<div className="text-sm font-semibold text-strong">{title}</div>
|
|
{hint && <div className="text-xs text-faint max-w-[36ch]">{hint}</div>}
|
|
{action && <div className="mt-3">{action}</div>}
|
|
</div>
|
|
);
|
|
}
|