Ubuntu
62 lines
1.5 KiB
TypeScript
62 lines
1.5 KiB
TypeScript
import { Button } from "@/components/retroui/Button";
|
|
import { Dialog } from "@/components/retroui/Dialog";
|
|
import { Text } from "@/components/retroui/Text";
|
|
import { useState } from "react";
|
|
|
|
type Variants =
|
|
| "auto"
|
|
| "sm"
|
|
| "md"
|
|
| "lg"
|
|
| "xl"
|
|
| "2xl"
|
|
| "3xl"
|
|
| "4xl"
|
|
| "screen";
|
|
|
|
export default function DialogStyleWidthVariant() {
|
|
const [variant, setVariant] = useState<Variants>("auto");
|
|
|
|
const sizes: Variants[] = [
|
|
"auto",
|
|
"sm",
|
|
"md",
|
|
"lg",
|
|
"xl",
|
|
"2xl",
|
|
"3xl",
|
|
"4xl",
|
|
"screen",
|
|
];
|
|
|
|
return (
|
|
<Dialog>
|
|
<Dialog.Trigger asChild>
|
|
<Button>Open Dialog</Button>
|
|
</Dialog.Trigger>
|
|
<Dialog.Content size={variant}>
|
|
<Dialog.Header>
|
|
<Text as="h5">Dialog with variants</Text>
|
|
</Dialog.Header>
|
|
<section className="flex flex-col gap-4 p-4">
|
|
<section className="text-xl">
|
|
<p>Choose your width size</p>
|
|
<section className="flex flex-wrap gap-4">
|
|
{sizes.map((singleVariant) => (
|
|
<Button
|
|
key={"variant-list-" + singleVariant}
|
|
type="button"
|
|
variant={singleVariant == variant ? "default" : "outline"}
|
|
onClick={() => setVariant(singleVariant)}
|
|
>
|
|
{singleVariant}
|
|
</Button>
|
|
))}
|
|
</section>
|
|
</section>
|
|
</section>
|
|
</Dialog.Content>
|
|
</Dialog>
|
|
);
|
|
}
|