{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "alert-8",
  "type": "registry:component",
  "title": "Alert 8",
  "description": "Alert 8. A component used to display important messages, notifications, or feedback to the user.",
  "dependencies": [
    "react-icons"
  ],
  "registryDependencies": [
    "alert",
    "button"
  ],
  "files": [
    {
      "path": "components/watermelon/alert-8.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport { useState } from 'react';\n\nimport { MdError } from 'react-icons/md';\nimport { RxCross2 } from 'react-icons/rx';\n\nimport {\n  Alert,\n  AlertDescription,\n  AlertTitle,\n} from '@/components/base-ui/alert';\nimport { Button } from '@/components/base-ui/button';\n\nconst Alert8 = () => {\n  const [isActive, setIsActive] = useState(true);\n\n  if (!isActive) return null;\n\n  return (\n    <Alert className=\"bg-primary text-primary-foreground flex flex-col gap-3 border-none sm:flex-row sm:items-start\">\n      <div className=\"flex w-full items-start gap-3\">\n        <MdError className=\"size-4 shrink-0\" />\n\n        <div className=\"flex min-w-0 flex-1 flex-col gap-4\">\n          <div className=\"flex flex-col gap-1\">\n            <AlertTitle>Update ready to install</AlertTitle>\n            <AlertDescription className=\"text-primary-foreground/70 text-wrap!\">\n              A new version is available with performance improvements and a\n              refreshed dashboard experience.\n            </AlertDescription>\n          </div>\n\n          <div className=\"flex shrink-0 items-center gap-3\">\n            <Button className=\"bg-secondary/10 hover:bg-secondary/20 focus-visible:bg-secondary/20 h-7 rounded-lg px-2\">\n             Later\n            </Button>\n            <Button variant=\"secondary\" className=\"h-7 rounded-lg px-2\">\n              Update now\n            </Button>\n          </div>\n        </div>\n\n        <button\n          className=\"size-5 shrink-0 cursor-pointer\"\n          onClick={() => setIsActive(false)}\n        >\n          <RxCross2 className=\"size-5\" />\n          <span className=\"sr-only\">Close</span>\n        </button>\n      </div>\n    </Alert>\n  );\n};\n\nexport default Alert8;\n"
    }
  ]
}