Files
UHD_Media_Tool/apps/web/app/components/console/empty-state.tsx
T
umtandClaude Fable 5.1 b22c440139 chore: scaffold monorepo and migrate uhd_web design system (W0-A)
- pnpm workspace: apps/{web,server}, packages/{contracts,db,domain,adapters,tasks,agent,testkit}
- server: Hono + zod-openapi, API Key auth with scopes, redacting pino logger, SSE event bus with replay, worker heartbeat
- db: Kysely + pg, file migrator, 0001_init (settings/api_key/audit_event/outbox_event)
- web: React Router 7 SPA console shell with 12 workspace placeholders, uhd_web tokens/ui/guard scripts
- docs: ADR-001 (Node over Deno), dev runbook, design system rules

Co-Authored-By: Claude Fable 5.1 <[email protected]>
2026-09-27 17:36:26 +08:00

36 lines
1.1 KiB
TypeScript

import type { LucideIcon } from "lucide-react";
import { Inbox } from "lucide-react";
import type { ReactNode } from "react";
import { cn } from "~/lib/utils";
/** 空态:图标 + 标题 + 说明 + 可选操作。用于"尚无数据"与"功能建设中"占位 */
export function EmptyState({
icon: Icon = Inbox,
title,
description,
action,
plain = false,
className,
}: {
icon?: LucideIcon;
title: string;
description?: ReactNode;
action?: ReactNode;
/** 放在已有卡片内时用 plain,避免玻璃叠玻璃 */
plain?: boolean;
className?: string;
}) {
return (
<div
className={cn("pg-slab flex flex-col items-center justify-center rounded-xl px-6 py-14 text-center", className)}
>
<span className="mb-4 grid h-11 w-11 place-items-center rounded-full bg-foreground/[0.05] text-muted-foreground">
<Icon className="h-5 w-5" />
</span>
<p className="text-lead font-medium text-foreground">{title}</p>
{description ? <p className="mt-1.5 max-w-md text-caption text-muted-foreground">{description}</p> : null}
{action ? <div className="mt-5">{action}</div> : null}
</div>
);
}