Components
Loading preview...
Here is Dialog components
@felipemenezes098
npx shadcn@latest add https://21st.dev/r/felipemenezes098/the-dialog'use client'
import { useState } from 'react'
import { CheckIcon, CopyIcon } from 'lucide-react'
import { Button } from '@/components/ui/button'
import {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from '@/components/ui/dialog'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
const shareUrl = 'https://ui.flexnative.com/patterns/dialog'
export default function Dialog05() {
const [copied, setCopied] = useState(false)
function handleCopy() {
navigator.clipboard.writeText(shareUrl)
setCopied(true)
setTimeout(() => setCopied(false), 2000)
}
return (
<Dialog>
<DialogTrigger asChild>
<Button variant="outline">Share link</Button>
</DialogTrigger>
<DialogContent className="sm:max-w-md">
<DialogHeader>
<DialogTitle>Share link</DialogTitle>
<DialogDescription>
Anyone with this link can view the pattern preview. Links expire
after 7 days on the free plan.
</DialogDescription>
</DialogHeader>
<div className="flex flex-col gap-2">
<Label htmlFor="dialog-05-link" className="sr-only">
Share URL
</Label>
<div className="flex items-center gap-2">
<Input
id="dialog-05-link"
readOnly
defaultValue={shareUrl}
className="font-mono text-xs"
/>
<Button
type="button"
variant="outline"
size="icon"
onClick={handleCopy}
aria-label={copied ? 'Copied' : 'Copy link'}
>
{copied ? <CheckIcon /> : <CopyIcon />}
</Button>
</div>
</div>
<DialogFooter>
<DialogClose asChild>
<Button variant="outline">Close</Button>
</DialogClose>
</DialogFooter>
</DialogContent>
</Dialog>
)
}