{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-sonner-14","type":"registry:block","title":"Custom invert error toast with details","description":"Custom invert error toast with details","dependencies":["sonner"],"registryDependencies":["button","separator"],"files":[{"path":"c-sonner-14.tsx","type":"registry:block","content":"import { toast } from \"sonner\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Separator } from \"@/components/ui/separator\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Pattern() {\n  const showToast = () => {\n    toast.custom(() => (\n      <div className=\"bg-invert text-invert-foreground rounded-md flex w-[356px] flex-col gap-3 border border-transparent p-4 shadow-lg\">\n        <div className=\"flex items-start gap-3\">\n          <div className=\"flex size-6 shrink-0 items-center justify-center rounded-full bg-red-500 text-white\">\n            <IconPlaceholder\n              lucide=\"XIcon\"\n              tabler=\"IconX\"\n              hugeicons=\"MultiplicationSignIcon\"\n              phosphor=\"XIcon\"\n              remixicon=\"RiCloseLine\"\n              className=\"size-3.5\"\n            />\n          </div>\n          <div className=\"flex flex-1 flex-col gap-1\">\n            <p className=\"text-sm font-semibold\">Build Failed</p>\n            <p className=\"text-invert-foreground/70 text-sm\">\n              Compilation error in 2 files. Fix errors before deploying.\n            </p>\n          </div>\n        </div>\n        <Separator className=\"bg-border/10\" />\n        <div className=\"text-invert-foreground/60 space-y-1 font-mono text-xs\">\n          <p>src/api/auth.ts:42 — TypeError: undefined is not a function</p>\n          <p>src/utils/parse.ts:18 — SyntaxError: Unexpected token</p>\n        </div>\n        <div className=\"flex gap-2\">\n          <Button\n            size=\"xs\"\n            variant=\"outline\"\n            className=\"bg-background/10 border-border/10 text-invert-foreground flex-1\"\n            onClick={() => toast.dismiss()}\n          >\n            View Logs\n          </Button>\n          <Button\n            size=\"xs\"\n            className=\"flex-1 border-red-800 bg-red-500 text-white hover:border-red-900 hover:bg-red-600\"\n            onClick={() => toast.dismiss()}\n          >\n            Retry Build\n          </Button>\n        </div>\n      </div>\n    ))\n  }\n\n  return (\n    <div className=\"flex items-center justify-center\">\n      <Button onClick={showToast} variant=\"outline\" className=\"w-fit\">\n        Invert Error Toast\n      </Button>\n    </div>\n  )\n}","target":"components/examples/c-sonner-14.tsx"}],"meta":{"order":14}}