{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "alert-10",
  "type": "registry:component",
  "title": "Alert 10",
  "description": "Alert 10. A component used to display important messages, notifications, or feedback to the user.",
  "dependencies": [
    "react-icons"
  ],
  "registryDependencies": [
    "alert"
  ],
  "files": [
    {
      "path": "components/watermelon/alert-10.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';\n\nconst Alert10 = () => {\n  const [isActive, setIsActive] = useState(true);\n\n  if (!isActive) return null;\n\n  return (\n    <Alert className=\"border-accent-foreground/20 from-accent text-accent-foreground flex justify-between bg-gradient-to-b to-transparent to-50%\">\n      <MdError className=\"size-4\" />\n      <div className=\"flex flex-1 flex-col gap-1 leading-tight\">\n        <AlertTitle>Confirm your email to get started</AlertTitle>\n        <AlertDescription className=\"text-accent-foreground/60\">\n          A verification link has been sent to your email. Open it to activate\n          your account.\n        </AlertDescription>\n      </div>\n      <button\n        className=\"cursor-pointer self-start\"\n        onClick={() => setIsActive(false)}\n      >\n        <RxCross2 className=\"size-5\" />\n        <span className=\"sr-only\">Close</span>\n      </button>\n    </Alert>\n  );\n};\n\nexport default Alert10;\n"
    }
  ]
}