{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"toast-06","type":"registry:component","title":"Rich Content Toasts","description":"Advanced toast notifications with complex layouts, custom components, and interactive elements. Features social notifications with avatars and action buttons, email notifications with priority badges, and comprehensive interaction handling. Perfect for applications requiring rich notification experiences with user engagement features.","dependencies":["lucide-react","sonner"],"registryDependencies":["badge","button","card"],"files":[{"path":"src/registry/blocks/application/feedback/toasts/toast-06.tsx","content":"\"use client\";\n\nimport { Heart, Mail } from \"lucide-react\";\nimport { toast } from \"sonner\";\nimport { cn } from \"@/registry/lib/utils\";\nimport { Badge } from \"@/registry/ui/badge\";\nimport { Button } from \"@/registry/ui/button\";\nimport { Card, CardContent } from \"@/registry/ui/card\";\n\nexport interface Toast06Props {\n  className?: string;\n}\n\nconst content: {\n  header: {\n    title: string;\n    subtitle: string;\n  };\n  toasts: {\n    social: {\n      buttonText: string;\n      user: string;\n      action: string;\n      post: string;\n      comment: string;\n      actions: {\n        view: string;\n        reply: string;\n      };\n    };\n    email: {\n      buttonText: string;\n      sender: string;\n      subject: string;\n      preview: string;\n      priority: string;\n      actions: {\n        reply: string;\n      };\n    };\n  };\n} = {\n  header: {\n    title: \"Rich Content Toasts\",\n    subtitle:\n      \"Toasts with complex layouts, custom components, and interactive elements\",\n  },\n  toasts: {\n    social: {\n      buttonText: \"Social Notification\",\n      user: \"Sarah\",\n      action: \"liked your post\",\n      post: \"View Post\",\n      comment: \"Great insights on React performance optimization!\",\n      actions: {\n        view: \"View Post\",\n        reply: \"Reply\",\n      },\n    },\n    email: {\n      buttonText: \"Email Notification\",\n      sender: \"John Doe\",\n      subject: \"Re: Project proposal\",\n      preview: \"Thanks for the detailed proposal...\",\n      priority: \"High Priority\",\n      actions: {\n        reply: \"Reply\",\n      },\n    },\n  },\n};\n\nexport function Toast06({ className }: Toast06Props) {\n  const showSocialToast = () => {\n    toast(\n      <div\n        className=\"flex items-start gap-3\"\n        data-testid=\"social-toast-content\"\n      >\n        <div className=\"w-10 h-10 bg-gradient-to-br from-purple-500 to-pink-500 rounded-full flex items-center justify-center flex-shrink-0\">\n          <Heart className=\"h-5 w-5 text-white\" />\n        </div>\n        <div className=\"flex-1 min-w-0\">\n          <div className=\"font-semibold\">\n            {content.toasts.social.user} {content.toasts.social.action}\n          </div>\n          <div className=\"text-sm text-muted-foreground mt-1\">\n            \"{content.toasts.social.comment}\"\n          </div>\n          <div className=\"flex items-center gap-2 mt-2\">\n            <Button\n              size=\"sm\"\n              variant=\"outline\"\n              className=\"h-7 text-xs bg-transparent\"\n              onClick={() => console.log(\"View post clicked\")}\n              data-testid=\"social-view-button\"\n            >\n              {content.toasts.social.actions.view}\n            </Button>\n            <Button\n              size=\"sm\"\n              variant=\"ghost\"\n              className=\"h-7 text-xs\"\n              onClick={() => console.log(\"Reply clicked\")}\n              data-testid=\"social-reply-button\"\n            >\n              {content.toasts.social.actions.reply}\n            </Button>\n          </div>\n        </div>\n      </div>,\n      {\n        duration: 6000,\n      },\n    );\n  };\n\n  const showEmailToast = () => {\n    toast(\n      <div className=\"flex items-start gap-3\" data-testid=\"email-toast-content\">\n        <div className=\"w-8 h-8 bg-blue-100 dark:bg-blue-900/30 rounded-full flex items-center justify-center flex-shrink-0\">\n          <Mail className=\"h-4 w-4 text-blue-600 dark:text-blue-400\" />\n        </div>\n        <div className=\"flex-1 min-w-0\">\n          <div className=\"font-semibold\">\n            New email from {content.toasts.email.sender}\n          </div>\n          <div className=\"text-sm text-muted-foreground mt-1 line-clamp-2\">\n            {content.toasts.email.subject} - {content.toasts.email.preview}\n          </div>\n          <div className=\"flex items-center gap-2 mt-2\">\n            <Badge variant=\"secondary\" className=\"text-xs\">\n              {content.toasts.email.priority}\n            </Badge>\n            <Button\n              size=\"sm\"\n              variant=\"outline\"\n              className=\"h-7 text-xs bg-transparent\"\n              onClick={() => console.log(\"Email reply clicked\")}\n              data-testid=\"email-reply-button\"\n            >\n              {content.toasts.email.actions.reply}\n            </Button>\n          </div>\n        </div>\n      </div>,\n      {\n        duration: 8000,\n      },\n    );\n  };\n\n  return (\n    <Card\n      className={cn(\"w-full max-w-4xl mx-auto\", className)}\n      data-testid=\"rich-content-toasts-container\"\n    >\n      <CardContent className=\"p-6\">\n        <div className=\"space-y-4\">\n          <div>\n            <h3 className=\"text-lg font-semibold\">{content.header.title}</h3>\n            <p className=\"text-sm text-muted-foreground\">\n              {content.header.subtitle}\n            </p>\n          </div>\n\n          <div\n            className=\"grid grid-cols-1 md:grid-cols-2 gap-4\"\n            data-testid=\"rich-toast-buttons-grid\"\n          >\n            <div className=\"space-y-2\" data-testid=\"social-toast-section\">\n              <h4 className=\"font-medium\">Social Notification</h4>\n              <Button\n                onClick={showSocialToast}\n                variant=\"outline\"\n                className=\"w-full bg-transparent\"\n                data-testid=\"social-toast-button\"\n              >\n                <Heart className=\"mr-2 h-4 w-4\" />\n                {content.toasts.social.buttonText}\n              </Button>\n              <p className=\"text-sm text-muted-foreground\">\n                Rich content with avatar and interactive actions\n              </p>\n            </div>\n\n            <div className=\"space-y-2\" data-testid=\"email-toast-section\">\n              <h4 className=\"font-medium\">Email Notification</h4>\n              <Button\n                onClick={showEmailToast}\n                variant=\"outline\"\n                className=\"w-full bg-transparent\"\n                data-testid=\"email-toast-button\"\n              >\n                <Mail className=\"mr-2 h-4 w-4\" />\n                {content.toasts.email.buttonText}\n              </Button>\n              <p className=\"text-sm text-muted-foreground\">\n                Email preview with priority badge and actions\n              </p>\n            </div>\n          </div>\n        </div>\n      </CardContent>\n    </Card>\n  );\n}\n","type":"registry:component"},{"path":"src/registry/lib/utils.ts","content":"import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","type":"registry:lib"}]}