"use client";import { Button } from "@/components/ui/button";import {  Dialog,  DialogContent,  DialogHeader,  DialogTitle,  DialogTrigger,} from "@/components/ui/dialog";import { Input } from "@/components/ui/input";import { Label } from "@/components/ui/label";import { Switch } from "@/components/ui/switch";import {  Tooltip,  TooltipContent,  TooltipProvider,  TooltipTrigger,} from "@/components/ui/tooltip";import { cn } from "@/lib/utils";import { CheckIcon, CopyIcon, ExternalLink, Link, Share2 } from "lucide-react";import { useRef, useState } from "react";export const title = "React Dialog Block Share Link";export default function DialogShareLink() {  const [open, setOpen] = useState<boolean>(false);  const [copied, setCopied] = useState<boolean>(false);  const inputRef = useRef<HTMLInputElement>(null);  const handleCopy = () => {    if (inputRef.current) {      navigator.clipboard.writeText(inputRef.current.value);      setCopied(true);      setTimeout(() => setCopied(false), 1500);    }  };  return (    <Dialog open={open} onOpenChange={setOpen}>      <div className="flex min-h-[350px] items-center justify-center">        <DialogTrigger asChild>          <Button>            <Share2 className="mr-2 h-4 w-4" />            Share          </Button>        </DialogTrigger>      </div>      <DialogContent className="sm:max-w-md">        <DialogHeader>          <DialogTitle>Share & Collaborate</DialogTitle>          <p className="text-sm text-muted-foreground">            Share this project with your team to collaborate on it.          </p>        </DialogHeader>        <div className="space-y-4 py-4">          <div className="flex items-center justify-between space-x-2">            <div className="flex items-center space-x-2">              <span>Enable comments and suggestions</span>            </div>            <Switch id="comments" />          </div>          <div className="space-y-1.5">            <Label htmlFor="share-link" className="sr-only">              Share Link            </Label>            <div className="relative">              <Input                ref={inputRef}                id="share-link"                readOnly                value="https://example.com/share/abc123?token=xyz"                className="pe-9"              />              <TooltipProvider delayDuration={0}>                <Tooltip>                  <TooltipTrigger asChild>                    <button                      onClick={handleCopy}                      className="text-muted-foreground/80 hover:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md transition-[color,box-shadow] outline-none focus:z-10 focus-visible:ring-[3px] disabled:pointer-events-none disabled:cursor-not-allowed"                      aria-label={copied ? "Copied" : "Copy to clipboard"}                      disabled={copied}                    >                      <div                        className={cn(                          "transition-all",                          copied ? "scale-100 opacity-100" : "scale-0 opacity-0"                        )}                      >                        <CheckIcon                          className="text-primary"                          size={16}                          aria-hidden="true"                        />                      </div>                      <div                        className={cn(                          "absolute transition-all",                          copied ? "scale-0 opacity-0" : "scale-100 opacity-100"                        )}                      >                        <CopyIcon size={16} aria-hidden="true" />                      </div>                    </button>                  </TooltipTrigger>                  <TooltipContent className="px-2 py-1 text-xs">                    {copied ? "Copied!" : "Copy to clipboard"}                  </TooltipContent>                </Tooltip>              </TooltipProvider>            </div>          </div>          <div className="flex space-x-2">            <Button className="flex-1 gap-2" onClick={handleCopy}>              <Link className="h-4 w-4" />              Copy Link            </Button>            <Button variant="outline" className="flex-1 gap-2">              <ExternalLink className="h-4 w-4" />              Preview            </Button>          </div>        </div>      </DialogContent>    </Dialog>  );}