37 lines
1.7 KiB
JSON
37 lines
1.7 KiB
JSON
{
|
|
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
|
"name": "base-switch-demo",
|
|
"type": "registry:ui",
|
|
"title": "Base Switch Demo",
|
|
"description": "Demo showing a base switch.",
|
|
"dependencies": [
|
|
"lucide-react"
|
|
],
|
|
"registryDependencies": [
|
|
"https://animate-ui.com/r/base-switch",
|
|
"label"
|
|
],
|
|
"files": [
|
|
{
|
|
"path": "registry/demo/base/switch/index.tsx",
|
|
"content": "'use client';\n\nimport { useState } from 'react';\nimport { MoonIcon, SunIcon } from 'lucide-react';\n\nimport { Label } from '@/components/ui/label';\nimport { Switch } from '@/components/animate-ui/base/switch';\n\ninterface BaseSwitchDemoProps {\n leftIcon?: boolean;\n rightIcon?: boolean;\n thumbIcon?: boolean;\n}\n\nexport const BaseSwitchDemo = ({\n leftIcon,\n rightIcon,\n thumbIcon,\n}: BaseSwitchDemoProps) => {\n const [checked, setChecked] = useState(true);\n\n const ThumbIcon = checked ? <MoonIcon /> : <SunIcon />;\n\n return (\n <div className=\"flex items-center space-x-2\">\n <Label htmlFor=\"switch-theme\">Switch theme</Label>\n <Switch\n checked={checked}\n onCheckedChange={setChecked}\n id=\"switch-theme\"\n leftIcon={leftIcon ? <MoonIcon /> : null}\n rightIcon={rightIcon ? <SunIcon /> : null}\n thumbIcon={thumbIcon ? ThumbIcon : null}\n />\n </div>\n );\n};\n",
|
|
"type": "registry:ui",
|
|
"target": "components/animate-ui/demo/base/switch.tsx"
|
|
}
|
|
],
|
|
"meta": {
|
|
"demoProps": {
|
|
"Switch": {
|
|
"leftIcon": {
|
|
"value": false
|
|
},
|
|
"rightIcon": {
|
|
"value": false
|
|
},
|
|
"thumbIcon": {
|
|
"value": false
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} |