83 lines
2.1 KiB
TypeScript
83 lines
2.1 KiB
TypeScript
import React from 'react';
|
||
import {
|
||
Dialog,
|
||
DialogTrigger,
|
||
DialogContent,
|
||
DialogHeader,
|
||
DialogFooter,
|
||
DialogTitle,
|
||
DialogDescription,
|
||
DialogClose,
|
||
} from '../../../../ui-next/src/components/Dialog/Dialog';
|
||
import { Button } from '../../../../ui-next/src/components/Button';
|
||
import ShowcaseRow from './ShowcaseRow';
|
||
|
||
/**
|
||
* DialogShowcase demonstrates a simple Radix‑based dialog.
|
||
*/
|
||
export default function DialogShowcase() {
|
||
return (
|
||
<ShowcaseRow
|
||
title="Dialog"
|
||
description="Modal dialog with header, content, and footer actions."
|
||
code={`
|
||
<Dialog>
|
||
<DialogTrigger asChild>
|
||
<Button variant="default">Open Dialog</Button>
|
||
</DialogTrigger>
|
||
<DialogContent>
|
||
<DialogHeader>
|
||
<DialogTitle>Example Dialog</DialogTitle>
|
||
</DialogHeader>
|
||
<DialogDescription>
|
||
This is a short message inside the dialog.
|
||
</DialogDescription>
|
||
<DialogFooter>
|
||
<DialogClose asChild>
|
||
<Button variant="secondary" className="min-w-[60px]">Cancel</Button>
|
||
</DialogClose>
|
||
<DialogClose asChild>
|
||
<Button variant="default" className="min-w-[60px]">OK</Button>
|
||
</DialogClose>
|
||
</DialogFooter>
|
||
</DialogContent>
|
||
</Dialog>
|
||
`}
|
||
>
|
||
<Dialog>
|
||
<DialogTrigger asChild>
|
||
<Button variant="default">Open Dialog</Button>
|
||
</DialogTrigger>
|
||
|
||
<DialogContent>
|
||
<DialogHeader>
|
||
<DialogTitle>Example Dialog</DialogTitle>
|
||
</DialogHeader>
|
||
|
||
<DialogDescription>This is a short message inside the dialog.</DialogDescription>
|
||
|
||
<DialogFooter>
|
||
<DialogClose asChild>
|
||
<Button
|
||
variant="secondary"
|
||
className="min-w-[60px]"
|
||
>
|
||
Cancel
|
||
</Button>
|
||
</DialogClose>
|
||
|
||
<DialogClose asChild>
|
||
<Button
|
||
variant="default"
|
||
className="min-w-[60px]"
|
||
>
|
||
OK
|
||
</Button>
|
||
</DialogClose>
|
||
</DialogFooter>
|
||
</DialogContent>
|
||
</Dialog>
|
||
</ShowcaseRow>
|
||
);
|
||
}
|