{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "moderation-queue",
  "title": "Moderation Queue",
  "author": "Ben Hofstetter <ben.hofstetter@gmail.com>",
  "description": "A moderation queue for reviewing community submissions — pending items with approve/reject actions and reviewed history.",
  "type": "registry:component",
  "categories": [
    "snax"
  ],
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "src/registry/components/moderation-queue/moderation-queue.tsx",
      "content": "\"use client\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Check, X, Clock, FileText } from \"lucide-react\"\n\nexport type ModerationItem = {\n  id: string\n  title: string\n  formatType: string\n  status: \"pending\" | \"approved\" | \"rejected\"\n  contributorName?: string\n  submittedAt?: string\n  moderatorNotes?: string\n}\n\nexport function ModerationQueue({\n  items = [],\n  onApprove,\n  onReject,\n  className,\n}: React.ComponentProps<\"div\"> & {\n  items: ModerationItem[]\n  onApprove?: (id: string) => void\n  onReject?: (id: string) => void\n}) {\n  const pending = items.filter((i) => i.status === \"pending\")\n  const reviewed = items.filter((i) => i.status !== \"pending\")\n\n  return (\n    <div className={cn(\"space-y-4\", className)}>\n      {pending.length > 0 && (\n        <div>\n          <h3 className=\"mb-2 flex items-center gap-1.5 text-sm font-medium\">\n            <Clock className=\"size-4\" /> Pending ({pending.length})\n          </h3>\n          <div className=\"space-y-2\">\n            {pending.map((item) => (\n              <div key={item.id} className=\"flex items-center justify-between gap-3 rounded-lg border p-3\">\n                <div className=\"min-w-0 flex-1\">\n                  <div className=\"flex items-center gap-2\">\n                    <FileText className=\"size-3.5 shrink-0 text-muted-foreground\" />\n                    <p className=\"truncate text-sm font-medium\">{item.title}</p>\n                    <span className=\"shrink-0 rounded-full border px-1.5 py-0.5 font-mono text-[10px] text-muted-foreground\">\n                      {item.formatType}\n                    </span>\n                  </div>\n                  {item.contributorName && (\n                    <p className=\"mt-0.5 truncate text-xs text-muted-foreground\">\n                      by {item.contributorName}\n                    </p>\n                  )}\n                </div>\n                <div className=\"flex shrink-0 gap-1\">\n                  <button\n                    onClick={() => onApprove?.(item.id)}\n                    className=\"flex items-center gap-1 rounded-md border border-input px-2 py-1 text-xs hover:bg-accent\"\n                  >\n                    <Check className=\"size-3\" /> Approve\n                  </button>\n                  <button\n                    onClick={() => onReject?.(item.id)}\n                    className=\"flex items-center gap-1 rounded-md border border-input px-2 py-1 text-xs hover:bg-accent\"\n                  >\n                    <X className=\"size-3\" /> Reject\n                  </button>\n                </div>\n              </div>\n            ))}\n          </div>\n        </div>\n      )}\n\n      {reviewed.length > 0 && (\n        <div>\n          <h3 className=\"mb-2 text-sm font-medium text-muted-foreground\">Reviewed ({reviewed.length})</h3>\n          <div className=\"space-y-2\">\n            {reviewed.map((item) => (\n              <div key={item.id} className=\"flex items-center justify-between gap-3 rounded-lg border p-3 opacity-60\">\n                <div className=\"min-w-0 flex-1\">\n                  <p className=\"truncate text-sm font-medium\">{item.title}</p>\n                  <p className=\"mt-0.5 text-xs text-muted-foreground\">{item.moderatorNotes}</p>\n                </div>\n                <span className={cn(\n                  \"shrink-0 rounded-full border px-1.5 py-0.5 font-mono text-[10px]\",\n                  item.status === \"approved\" ? \"border-foreground\" : \"border-border\",\n                )}>\n                  {item.status}\n                </span>\n              </div>\n            ))}\n          </div>\n        </div>\n      )}\n\n      {items.length === 0 && (\n        <p className=\"py-8 text-center text-sm text-muted-foreground\">No submissions to review.</p>\n      )}\n    </div>\n  )\n}",
      "type": "registry:component",
      "target": "@components/moderation-queue.tsx"
    }
  ]
}