{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-sonner-21","type":"registry:block","title":"Updatable toast with ID","description":"Updatable toast with ID","dependencies":["sonner"],"registryDependencies":["button","spinner"],"files":[{"path":"c-sonner-21.tsx","type":"registry:block","content":"\"use client\"\n\nimport { useRef } from \"react\"\nimport { toast } from \"sonner\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Spinner } from \"@/components/ui/spinner\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction LoadingToast({ message }: { message: string }) {\n  return (\n    <div className=\"bg-popover text-popover-foreground border-border rounded-md flex w-[356px] items-center gap-3 border p-4 shadow-lg\">\n      <Spinner className=\"size-4 opacity-60\" />\n      <p className=\"text-xs font-medium\">{message}</p>\n    </div>\n  )\n}\n\nfunction SuccessToast() {\n  return (\n    <div className=\"bg-popover text-popover-foreground border-border rounded-md flex w-[356px] items-start gap-3 border p-4 shadow-lg\">\n      <div className=\"flex size-4 shrink-0 items-center justify-center rounded-full bg-green-500 text-white\">\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n          remixicon=\"RiCheckLine\"\n          className=\"size-3\"\n        />\n      </div>\n      <div className=\"flex flex-1 flex-col gap-0.5\">\n        <p className=\"text-xs font-semibold\">Upload complete!</p>\n        <p className=\"text-muted-foreground text-xs\">\n          3 files uploaded successfully.\n        </p>\n      </div>\n    </div>\n  )\n}\n\nexport function Pattern() {\n  const toastId = useRef<string | number | undefined>(undefined)\n\n  const startProgress = () => {\n    toastId.current = toast.custom(\n      () => <LoadingToast message=\"Preparing upload...\" />,\n      { duration: Infinity }\n    )\n\n    setTimeout(() => {\n      toast.custom(() => <LoadingToast message=\"Uploading files... 30%\" />, {\n        id: toastId.current,\n        duration: Infinity,\n      })\n    }, 1000)\n\n    setTimeout(() => {\n      toast.custom(() => <LoadingToast message=\"Uploading files... 70%\" />, {\n        id: toastId.current,\n        duration: Infinity,\n      })\n    }, 2000)\n\n    setTimeout(() => {\n      toast.custom(() => <SuccessToast />, {\n        id: toastId.current,\n        duration: 4000,\n      })\n    }, 3000)\n  }\n\n  return (\n    <div className=\"flex items-center justify-center\">\n      <Button onClick={startProgress} variant=\"outline\" className=\"w-fit\">\n        Updatable Toast\n      </Button>\n    </div>\n  )\n}","target":"components/examples/c-sonner-21.tsx"}],"meta":{"order":21}}