Dialog with Link Share and Toggles

1'use client';
2 
3import { CheckIcon, CopyIcon, ExternalLink, Link, Share2 } from 'lucide-react';
4import { useRef, useState } from 'react';
5import { Button } from '@/components/ui/button';
6import {
7  Dialog,
8  DialogContent,
9  DialogHeader,
10  DialogTitle,
11  DialogTrigger,
12} from '@/components/ui/dialog';
13import { Input } from '@/components/ui/input';
14import { Label } from '@/components/ui/label';
15import { Switch } from '@/components/ui/switch';
16import {
17  Tooltip,
18  TooltipContent,
19  TooltipProvider,
20  TooltipTrigger,
21} from '@/components/ui/tooltip';
22import { cn } from '@/lib/utils';
23 
24export default function Dialog09() {
25  const [open, setOpen] = useState<boolean>(true);
26  const [copied, setCopied] = useState<boolean>(false);
27  const inputRef = useRef<HTMLInputElement>(null);
28 
29  const handleCopy = () => {
30    if (inputRef.current) {
31      navigator.clipboard.writeText(inputRef.current.value);
32      setCopied(true);
33      setTimeout(() => setCopied(false), 1500);
34    }
35  };
36 
37  return (
38    <Dialog onOpenChange={setOpen} open={open}>
39      <DialogTrigger render={<Button />}>
40        <Share2 className="mr-2 h-4 w-4" />
41        Share
42      </DialogTrigger>
43      <DialogContent className="sm:max-w-md">
44        <DialogHeader>
45          <DialogTitle>Share & Collaborate</DialogTitle>
46          <p className="text-pretty text-muted-foreground text-sm">
47            Share this project with your team to collaborate on it.
48          </p>
49        </DialogHeader>
50        <div className="space-y-4 py-4">
51          <div className="flex items-center justify-between space-x-2">
52            <div className="flex items-center space-x-2">
53              <span>Enable comments and suggestions</span>
54            </div>
55            <Switch id="comments" />
56          </div>
57 
58          <div className="space-y-1.5">
59            <Label className="sr-only" htmlFor="share-link">
60              Share Link
61            </Label>
62            <div className="relative">
63              <Input
64                className="pe-9"
65                id="share-link"
66                readOnly
67                ref={inputRef}
68                value="https://writer.so/app/projects/123?share=true"
69              />
70              <TooltipProvider delay={0}>
71                <Tooltip>
72                  <TooltipTrigger
73                    render={
74                      <button
75                        aria-label={copied ? 'Copied' : 'Copy to clipboard'}
76// … truncated