{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dialog-09",
  "type": "registry:block",
  "title": "Dialog with Link Share and Toggles",
  "description": "A dialog with link share and toggles block.",
  "author": "ephraim duncan <https://ephraimduncan.com>",
  "registryDependencies": [
    "button",
    "dialog",
    "input",
    "label",
    "switch",
    "tooltip"
  ],
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "content/components/dialogs/dialog-09.tsx",
      "type": "registry:component",
      "target": "components/dialog-09.tsx",
      "content": "'use client';\n\nimport { CheckIcon, CopyIcon, ExternalLink, Link, Share2 } from 'lucide-react';\nimport { useRef, useState } from 'react';\nimport { Button } from '@/components/ui/button';\nimport {\n  Dialog,\n  DialogContent,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/components/ui/dialog';\nimport { Input } from '@/components/ui/input';\nimport { Label } from '@/components/ui/label';\nimport { Switch } from '@/components/ui/switch';\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/components/ui/tooltip';\nimport { cn } from '@/lib/utils';\n\nexport default function Dialog09() {\n  const [open, setOpen] = useState<boolean>(true);\n  const [copied, setCopied] = useState<boolean>(false);\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const handleCopy = () => {\n    if (inputRef.current) {\n      navigator.clipboard.writeText(inputRef.current.value);\n      setCopied(true);\n      setTimeout(() => setCopied(false), 1500);\n    }\n  };\n\n  return (\n    <Dialog onOpenChange={setOpen} open={open}>\n      <DialogTrigger render={<Button />}>\n        <Share2 className=\"mr-2 h-4 w-4\" />\n        Share\n      </DialogTrigger>\n      <DialogContent className=\"sm:max-w-md\">\n        <DialogHeader>\n          <DialogTitle>Share & Collaborate</DialogTitle>\n          <p className=\"text-pretty text-muted-foreground text-sm\">\n            Share this project with your team to collaborate on it.\n          </p>\n        </DialogHeader>\n        <div className=\"space-y-4 py-4\">\n          <div className=\"flex items-center justify-between space-x-2\">\n            <div className=\"flex items-center space-x-2\">\n              <span>Enable comments and suggestions</span>\n            </div>\n            <Switch id=\"comments\" />\n          </div>\n\n          <div className=\"space-y-1.5\">\n            <Label className=\"sr-only\" htmlFor=\"share-link\">\n              Share Link\n            </Label>\n            <div className=\"relative\">\n              <Input\n                className=\"pe-9\"\n                id=\"share-link\"\n                readOnly\n                ref={inputRef}\n                value=\"https://writer.so/app/projects/123?share=true\"\n              />\n              <TooltipProvider delay={0}>\n                <Tooltip>\n                  <TooltipTrigger\n                    render={\n                      <button\n                        aria-label={copied ? 'Copied' : 'Copy to clipboard'}\n                        className=\"absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md text-muted-foreground/80 outline-none transition-[color,box-shadow] hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed\"\n                        disabled={copied}\n                        onClick={handleCopy}\n                      />\n                    }\n                  >\n                    <div\n                      className={cn(\n                        'transition-[transform,opacity] duration-200 ease-out',\n                        copied ? 'scale-100 opacity-100' : 'scale-0 opacity-0'\n                      )}\n                    >\n                      <CheckIcon\n                        aria-hidden=\"true\"\n                        className=\"text-primary\"\n                        size={16}\n                      />\n                    </div>\n                    <div\n                      className={cn(\n                        'absolute transition-[transform,opacity] duration-200 ease-out',\n                        copied ? 'scale-0 opacity-0' : 'scale-100 opacity-100'\n                      )}\n                    >\n                      <CopyIcon aria-hidden=\"true\" size={16} />\n                    </div>\n                  </TooltipTrigger>\n                  <TooltipContent className=\"px-2 py-1 text-xs\">\n                    {copied ? 'Copied!' : 'Copy to clipboard'}\n                  </TooltipContent>\n                </Tooltip>\n              </TooltipProvider>\n            </div>\n          </div>\n\n          <div className=\"flex space-x-2\">\n            <Button className=\"flex-1 gap-2\" onClick={handleCopy}>\n              <Link className=\"h-4 w-4\" />\n              Copy Link\n            </Button>\n            <Button className=\"flex-1 gap-2\" variant=\"outline\">\n              <ExternalLink className=\"h-4 w-4\" />\n              Preview\n            </Button>\n          </div>\n        </div>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"
    }
  ],
  "categories": [
    "dialogs"
  ]
}