init

components/empty-state.tsx

@@ -0,0 +1,27 @@
+import Link from "next/link";
+import type { ReactNode } from "react";
+
+type EmptyStateProps = {
+  title: string;
+  description?: string;
+  action?: { href: string; label: string };
+  icon?: ReactNode;
+};
+
+export function EmptyState({ title, description, action, icon }: EmptyStateProps) {
+  return (
+    <div className="flex flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-muted/40 px-6 py-10 text-center">
+      {icon ? <div className="text-fg/40">{icon}</div> : null}
+      <div className="text-base font-semibold text-fg">{title}</div>
+      {description ? <p className="max-w-sm text-sm text-fg/60">{description}</p> : null}
+      {action ? (
+        <Link
+          href={action.href}
+          className="mt-2 rounded-md bg-accent px-4 py-2 text-sm font-semibold text-fg transition-opacity hover:opacity-90"
+        >
+          {action.label}
+        </Link>
+      ) : null}
+    </div>
+  );
+}