feat(ui): add linear design foundation

2026-04-25 19:56:24 +08:00
parent 42d7c50dc0
commit 0999f1905e
5 changed files with 113 additions and 8 deletions
@@ -0,0 +1,37 @@
+import { Inbox } from "lucide-react"
+import type * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
+  title: string
+  description?: string
+  icon?: React.ElementType
+  action?: React.ReactNode
+}
+
+export function EmptyState({
+  title,
+  description,
+  icon: Icon = Inbox,
+  action,
+  className,
+  ...props
+}: EmptyStateProps) {
+  return (
+    <div
+      className={cn(
+        "flex min-h-[280px] flex-col items-center justify-center rounded-xl border border-border/60 bg-transparent p-8 text-center",
+        className,
+      )}
+      {...props}
+    >
+      <div className="flex size-12 items-center justify-center rounded-full bg-muted/50">
+        <Icon className="size-6 text-muted-foreground" />
+      </div>
+      <h3 className="mt-4 text-sm font-semibold">{title}</h3>
+      {description && <p className="mt-2 text-sm text-muted-foreground max-w-sm">{description}</p>}
+      {action && <div className="mt-6">{action}</div>}
+    </div>
+  )
+}