Components
Loading preview...
This is dialog component
npx shadcn@latest add https://21st.dev/r/lyanchouss/the-dialog"use client";
import { useState } from "react";
import {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
const triggerButtonClassName =
"inline-flex items-center justify-center rounded-md bg-foreground px-4 py-2.5 font-medium text-[14px] text-background tracking-[-0.01em] transition-[transform,background-color] duration-200 ease-[cubic-bezier(0.16,1,0.3,1)] hover:-translate-y-px hover:bg-foreground/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2";
const cancelButtonClassName =
"inline-flex min-h-11 items-center justify-center rounded-md bg-muted/55 px-4 py-2.5 font-medium text-[14px] text-muted-foreground tracking-[-0.01em] transition-colors duration-150 hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2";
const actionButtonClassName =
"inline-flex min-h-11 items-center justify-center rounded-md bg-foreground px-4 py-2.5 font-medium text-[14px] text-background tracking-[-0.01em] transition-[transform,background-color] duration-200 ease-[cubic-bezier(0.16,1,0.3,1)] hover:-translate-y-px hover:bg-foreground/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2";
export function DialogPreview() {
const [open, setOpen] = useState(false);
return (
<Dialog onOpenChange={setOpen} open={open}>
<DialogTrigger asChild>
<button className={triggerButtonClassName} type="button">
Open dialog
</button>
</DialogTrigger>
<DialogContent open={open}>
<DialogHeader>
<DialogTitle>Confirm publish</DialogTitle>
<DialogDescription>
This sends the draft live for everyone on the team. You can still
roll back from history afterward.
</DialogDescription>
</DialogHeader>
<DialogFooter>
<DialogClose asChild>
<button className={cancelButtonClassName} type="button">
Cancel
</button>
</DialogClose>
<DialogClose asChild>
<button className={actionButtonClassName} type="button">
Continue
</button>
</DialogClose>
</DialogFooter>
</DialogContent>
</Dialog>
);
}
export default DialogPreview