{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-sonner-17","type":"registry:block","title":"Multi-action invert toast with avatar group","description":"Multi-action invert toast with avatar group","dependencies":["sonner"],"registryDependencies":["avatar","button","separator"],"files":[{"path":"c-sonner-17.tsx","type":"registry:block","content":"import { toast } from \"sonner\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Separator } from \"@/components/ui/separator\"\n\nconst reviewers = [\n  {\n    name: \"Alex Johnson\",\n    avatar:\n      \"https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=96&h=96&dpr=2&q=80\",\n    initials: \"AJ\",\n  },\n  {\n    name: \"Sarah Chen\",\n    avatar:\n      \"https://images.unsplash.com/photo-1519699047748-de8e457a634e?w=96&h=96&dpr=2&q=80\",\n    initials: \"SC\",\n  },\n  {\n    name: \"David Kim\",\n    avatar:\n      \"https://images.unsplash.com/photo-1607990281513-2c110a25bd8c?w=96&h=96&dpr=2&q=80\",\n    initials: \"DK\",\n  },\n]\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-center justify-between\">\n          <p className=\"text-sm font-semibold\">Pull Request #284</p>\n          <span className=\"text-invert-foreground/40 text-xs\">2m ago</span>\n        </div>\n        <p className=\"text-invert-foreground/70 text-sm\">\n          All reviewers approved. Ready to merge into{\" \"}\n          <code className=\"bg-background/10 rounded px-1 py-0.5 font-mono text-xs\">\n            main\n          </code>\n        </p>\n        <Separator className=\"bg-border/10\" />\n        <div className=\"flex items-center justify-between\">\n          <div className=\"flex -space-x-2\">\n            {reviewers.map((reviewer) => (\n              <Avatar\n                key={reviewer.name}\n                className=\"border-invert size-6 border-2\"\n              >\n                <AvatarImage src={reviewer.avatar} alt={reviewer.name} />\n                <AvatarFallback className=\"text-[10px]\">\n                  {reviewer.initials}\n                </AvatarFallback>\n              </Avatar>\n            ))}\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\"\n              onClick={() => toast.dismiss()}\n            >\n              View\n            </Button>\n            <Button\n              size=\"xs\"\n              className=\"border-green-800 bg-green-500 text-white hover:border-green-900 hover:bg-green-600\"\n              onClick={() => {\n                toast.dismiss()\n                toast.success(\"Merged successfully\")\n              }}\n            >\n              Merge\n            </Button>\n          </div>\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        PR Merge Toast\n      </Button>\n    </div>\n  )\n}","target":"components/examples/c-sonner-17.tsx"}],"meta":{"order":17}}