{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "button-25",
  "type": "registry:component",
  "title": "Button 25",
  "description": "Button 25. An interactive element used to trigger actions, submissions, or navigation.",
  "dependencies": [
    "react-icons"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "components/watermelon/button-25.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport { useState } from 'react';\n\nimport { ImSpinner2 } from 'react-icons/im';\n\nimport { Button } from '@/components/base-ui/button';\n\nimport { cn } from '@/lib/utils';\n\nconst Button25 = () => {\n  const [isLoading, setIsLoading] = useState(false);\n  const [status, setStatus] = useState<undefined | string>(undefined);\n\n  const handleClick = async () => {\n    setIsLoading(true);\n    setStatus(undefined);\n\n    try {\n      await new Promise((resolve) => setTimeout(resolve, 1000));\n      setStatus(Math.random() > 0.5 ? 'Submitted!' : 'Rejected!');\n    } catch (error) {\n      setStatus('Rejected!');\n      console.error(error);\n    } finally {\n      setIsLoading(false);\n    }\n  };\n\n  return (\n    <Button\n      variant=\"link\"\n      onClick={handleClick}\n      disabled={isLoading}\n      className={cn(\n        'flex cursor-pointer items-center gap-2 hover:no-underline',\n        {\n          'text-green-600 dark:text-green-400': status === 'Submitted!',\n          'text-destructive': status === 'Rejected!',\n        },\n      )}\n    >\n      {isLoading ? (\n        <>\n          <ImSpinner2 className=\"animate-spin\" />\n          Loading\n        </>\n      ) : status ? (\n        status\n      ) : (\n        'Click me'\n      )}\n    </Button>\n  );\n};\n\nexport default Button25;\n"
    }
  ]
}