Components
Loading preview...
This is a dialog component
npx shadcn@latest add https://21st.dev/r/lyanchouss/one-dialog'use client'
import { useState } from 'react'
import { Button } from '@/components/ui/button'
import {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from '@/components/ui/dialog'
import { Field, FieldDescription, FieldLabel } from '@/components/ui/field-1'
import { Input } from '@/components/ui/input'
const CONFIRM_TEXT = 'delete'
export function Dialog13() {
const [value, setValue] = useState('')
const canDelete = value === CONFIRM_TEXT
return (
<Dialog>
<DialogTrigger asChild>
<Button variant="destructive">Delete project</Button>
</DialogTrigger>
<DialogContent className="sm:max-w-md">
<DialogHeader>
<DialogTitle>Delete project</DialogTitle>
<DialogDescription>
This removes all files, comments, and history. Type{' '}
<span className="text-foreground font-mono font-medium">
{CONFIRM_TEXT}
</span>{' '}
to confirm.
</DialogDescription>
</DialogHeader>
<Field>
<FieldLabel htmlFor="dialog-13-confirm">Confirmation</FieldLabel>
<Input
id="dialog-13-confirm"
value={value}
onChange={(e) => setValue(e.target.value)}
placeholder={CONFIRM_TEXT}
autoComplete="off"
/>
<FieldDescription>
The destructive action stays disabled until the text matches.
</FieldDescription>
</Field>
<DialogFooter>
<DialogClose asChild>
<Button variant="outline">Cancel</Button>
</DialogClose>
<Button variant="destructive" disabled={!canDelete}>
Delete project
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
)
}
export default Dialog13