{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "button-03",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "src/components/watermelon-ui/button-03.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\n\nimport { Button } from \"@/components/ui/button\";\nimport {\n  Archive,\n  ArrowLeft,\n  ArrowRight,\n  Download,\n  LoaderCircle,\n  Mail,\n  Scan,\n  Sparkles,\n  Star,\n  ThumbsUp,\n  Trash,\n  X,\n} from \"lucide-react\";\n\nexport default function ButtonDemo() {\n  const [isLoading, setIsLoading] = useState<boolean>(false);\n\n  const handleClick = () => {\n    setIsLoading(true);\n    // Simulate an async operation\n    setTimeout(() => {\n      setIsLoading(false);\n    }, 1000); // Reset after 1 second\n  };\n  return (\n    <div className=\"flex max-w-lg flex-wrap gap-3\">\n      <Button>\n        <Archive className=\"opacity-60\" size={16} aria-hidden=\"true\" />\n        Archive\n      </Button>\n      <Button variant=\"destructive\">\n        <Trash className=\"opacity-60\" size={16} aria-hidden=\"true\" />\n        Trash\n      </Button>\n      <Button variant=\"secondary\">\n        <X className=\"opacity-60\" size={16} aria-hidden=\"true\" />\n        Close\n      </Button>\n      <Button variant=\"outline\">\n        Magic\n        <Sparkles className=\"opacity-60\" size={16} aria-hidden=\"true\" />\n      </Button>\n      <Button className=\"group\" variant=\"ghost\">\n        <ArrowLeft\n          className=\"opacity-60 transition-transform group-hover:-translate-x-0.5\"\n          size={16}\n          aria-hidden=\"true\"\n        />\n        Back\n      </Button>\n      <Button className=\"group\">\n        Next\n        <ArrowRight\n          className=\"opacity-60 transition-transform group-hover:translate-x-0.5\"\n          size={16}\n          aria-hidden=\"true\"\n        />\n      </Button>\n      <Button className=\"group\" variant=\"secondary\">\n        <Mail className=\"opacity-60\" size={16} aria-hidden=\"true\" />\n        Send\n        <ArrowRight\n          className=\"opacity-60 transition-transform group-hover:translate-x-0.5\"\n          size={16}\n          aria-hidden=\"true\"\n        />\n      </Button>\n      <Button>\n        Download\n        <Download className=\"opacity-60\" size={16} aria-hidden=\"true\" />\n      </Button>\n      <Button disabled>\n        <LoaderCircle className=\"animate-spin\" size={16} aria-hidden=\"true\" />\n        Loading...\n      </Button>\n      <Button\n        onClick={handleClick}\n        disabled={isLoading}\n        data-loading={isLoading || undefined}\n        className=\"group relative disabled:opacity-100\"\n      >\n        <span className=\"group-data-loading:text-transparent\">\n          Click to load\n        </span>\n        {isLoading && (\n          <div className=\"absolute inset-0 flex items-center justify-center\">\n            <LoaderCircle\n              className=\"animate-spin\"\n              size={16}\n              aria-hidden=\"true\"\n            />\n          </div>\n        )}\n      </Button>\n      <Button variant=\"outline\">\n        Inbox\n        <span className=\"text-muted-foreground inline-flex h-5 max-h-full items-center rounded border px-1 font-[inherit] text-[0.625rem] font-medium\">\n          22\n        </span>\n      </Button>\n      <Button variant=\"outline\">\n        <Scan className=\"opacity-60\" size={16} aria-hidden=\"true\" />\n        Scan\n        <kbd className=\"bg-background text-muted-foreground/70 inline-flex h-5 max-h-full items-center rounded border px-1 font-[inherit] text-[0.625rem] font-medium\">\n          ⌘S\n        </kbd>\n      </Button>\n      <Button className=\"rounded-md py-0 ps-0\">\n        <div className=\"flex aspect-square h-full\">\n          <img\n            className=\"h-auto border border-primary w-full object-cover rounded-md\"\n            src=\"/ai.jpg\"\n            alt=\"Profile image\"\n            width={24}\n            height={24}\n            aria-hidden=\"true\"\n          />\n        </div>\n        @aliimam\n      </Button>\n      <Button className=\"py-0 pe-0\" variant=\"outline\">\n        <ThumbsUp className=\"opacity-60\" size={16} aria-hidden=\"true\" />\n        Like\n        <span className=\"text-muted-foreground before:bg-input relative  inline-flex h-full items-center justify-center rounded-full px-3 text-xs font-medium before:absolute before:inset-0 before:left-0 before:w-px\">\n          96\n        </span>\n      </Button>\n      <Button>\n        <Star className=\" opacity-60\" size={16} aria-hidden=\"true\" />\n        <span className=\"flex items-baseline gap-2\">\n          Review\n          <span className=\"text-primary-foreground/60 text-xs\">786</span>\n        </span>\n      </Button>\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ui/button-03.tsx"
    }
  ],
  "type": "registry:ui"
}