Doc Empty State

npx shadcn@latest add https://blocks.aiskillhub.info/api/registry/doc-empty-state

import { FileText, Plus } from "lucide-react";

export function DocEmptyState({ onCreate }: { onCreate?: () => void }) {
  return (
    <div className="flex flex-col items-center justify-center gap-3 rounded-2xl border border-dashed border-border bg-surface px-6 py-14 text-center">
      <span className="flex h-12 w-12 items-center justify-center rounded-xl bg-surface-2"><FileText className="h-6 w-6 text-muted" /></span>
      <div className="space-y-1">
        <p className="font-semibold">No pages yet</p>
        <p className="max-w-xs text-sm text-muted">Create your first document to start writing. Everything autosaves.</p>
      </div>
      <button onClick={onCreate} className="mt-1 inline-flex items-center gap-1.5 rounded-lg bg-primary px-3.5 py-2 text-sm font-medium text-primary-fg">
        <Plus className="h-4 w-4" /> New page
      </button>
    </div>
  );
}