mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-07-09 06:55:07 +00:00
17 lines
3.4 KiB
JSON
17 lines
3.4 KiB
JSON
{
|
|
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
|
"name": "separator-example",
|
|
"title": "Separator",
|
|
"registryDependencies": [
|
|
"separator",
|
|
"example"
|
|
],
|
|
"files": [
|
|
{
|
|
"path": "registry/base-sera/examples/separator-example.tsx",
|
|
"content": "import {\n Example,\n ExampleWrapper,\n} from \"@/registry/base-sera/components/example\"\nimport { Separator } from \"@/registry/base-sera/ui/separator\"\n\nexport default function SeparatorExample() {\n return (\n <ExampleWrapper>\n <SeparatorHorizontal />\n <SeparatorVertical />\n <SeparatorVerticalMenu />\n <SeparatorInList />\n </ExampleWrapper>\n )\n}\n\nfunction SeparatorHorizontal() {\n return (\n <Example title=\"Horizontal\">\n <div className=\"flex flex-col gap-4 text-sm style-lyra:text-xs/relaxed\">\n <div className=\"flex flex-col gap-1\">\n <div className=\"leading-none font-medium\">shadcn/ui</div>\n <div className=\"text-muted-foreground\">\n The Foundation for your Design System\n </div>\n </div>\n <Separator />\n <div>\n A set of beautifully designed components that you can customize,\n extend, and build on.\n </div>\n </div>\n </Example>\n )\n}\n\nfunction SeparatorVertical() {\n return (\n <Example title=\"Vertical\">\n <div className=\"flex h-5 items-center gap-4 text-sm style-lyra:text-xs/relaxed\">\n <div>Blog</div>\n <Separator orientation=\"vertical\" />\n <div>Docs</div>\n <Separator orientation=\"vertical\" />\n <div>Source</div>\n </div>\n </Example>\n )\n}\n\nfunction SeparatorVerticalMenu() {\n return (\n <Example title=\"Vertical Menu\">\n <div className=\"flex items-center gap-2 text-sm md:gap-4 style-lyra:text-xs/relaxed\">\n <div className=\"flex flex-col gap-1\">\n <span className=\"font-medium\">Settings</span>\n <span className=\"text-xs text-muted-foreground\">\n Manage preferences\n </span>\n </div>\n <Separator orientation=\"vertical\" />\n <div className=\"flex flex-col gap-1\">\n <span className=\"font-medium\">Account</span>\n <span className=\"text-xs text-muted-foreground\">\n Profile & security\n </span>\n </div>\n <Separator orientation=\"vertical\" />\n <div className=\"flex flex-col gap-1\">\n <span className=\"font-medium\">Help</span>\n <span className=\"text-xs text-muted-foreground\">Support & docs</span>\n </div>\n </div>\n </Example>\n )\n}\n\nfunction SeparatorInList() {\n return (\n <Example title=\"In List\">\n <div className=\"flex flex-col gap-2 text-sm style-lyra:text-xs/relaxed\">\n <dl className=\"flex items-center justify-between\">\n <dt>Item 1</dt>\n <dd className=\"text-muted-foreground\">Value 1</dd>\n </dl>\n <Separator />\n <dl className=\"flex items-center justify-between\">\n <dt>Item 2</dt>\n <dd className=\"text-muted-foreground\">Value 2</dd>\n </dl>\n <Separator />\n <dl className=\"flex items-center justify-between\">\n <dt>Item 3</dt>\n <dd className=\"text-muted-foreground\">Value 3</dd>\n </dl>\n </div>\n </Example>\n )\n}\n",
|
|
"type": "registry:example"
|
|
}
|
|
],
|
|
"type": "registry:example"
|
|
} |