Ubuntu
17 lines
2.0 KiB
JSON
17 lines
2.0 KiB
JSON
{
|
|
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
|
"name": "dialog-style-width-variant",
|
|
"type": "registry:block",
|
|
"title": "dialog-style-width-variant",
|
|
"registryDependencies": [
|
|
"https://retroui.dev/r/dialog.json"
|
|
],
|
|
"files": [
|
|
{
|
|
"path": "preview/components/dialog-style-width-variant.tsx",
|
|
"content": "import { Button } from \"@/components/retroui/Button\";\nimport { Dialog } from \"@/components/retroui/Dialog\";\nimport { Text } from \"@/components/retroui/Text\";\nimport { useState } from \"react\";\n\ntype Variants =\n | \"auto\"\n | \"sm\"\n | \"md\"\n | \"lg\"\n | \"xl\"\n | \"2xl\"\n | \"3xl\"\n | \"4xl\"\n | \"screen\";\n\nexport default function DialogStyleWidthVariant() {\n const [variant, setVariant] = useState<Variants>(\"auto\");\n\n const sizes: Variants[] = [\n \"auto\",\n \"sm\",\n \"md\",\n \"lg\",\n \"xl\",\n \"2xl\",\n \"3xl\",\n \"4xl\",\n \"screen\",\n ];\n\n return (\n <Dialog>\n <Dialog.Trigger asChild>\n <Button>Open Dialog</Button>\n </Dialog.Trigger>\n <Dialog.Content size={variant}>\n <Dialog.Header>\n <Text as=\"h5\">Dialog with variants</Text>\n </Dialog.Header>\n <section className=\"flex flex-col gap-4 p-4\">\n <section className=\"text-xl\">\n <p>Choose your width size</p>\n <section className=\"flex flex-wrap gap-4\">\n {sizes.map((singleVariant) => (\n <Button\n key={\"variant-list-\" + singleVariant}\n type=\"button\"\n variant={singleVariant == variant ? \"default\" : \"outline\"}\n onClick={() => setVariant(singleVariant)}\n >\n {singleVariant}\n </Button>\n ))}\n </section>\n </section>\n </section>\n </Dialog.Content>\n </Dialog>\n );\n}\n",
|
|
"type": "registry:block",
|
|
"target": "components/retroui/preview/dialog-style-width-variant.tsx"
|
|
}
|
|
]
|
|
} |