18 lines
1.7 KiB
JSON
18 lines
1.7 KiB
JSON
{
|
|
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
|
"name": "motion-highlight-tabs-hover-parent-demo",
|
|
"type": "registry:ui",
|
|
"title": "Motion Highlight Tabs Hover Parent Demo",
|
|
"description": "Demo showing the motion highlight tabs hover effect.",
|
|
"registryDependencies": [
|
|
"https://animate-ui.com/r/motion-highlight"
|
|
],
|
|
"files": [
|
|
{
|
|
"path": "registry/demo/effects/motion-highlight-tabs-hover-parent/index.tsx",
|
|
"content": "import { MotionHighlight } from '@/components/animate-ui/effects/motion-highlight';\n\nconst TABS = [\n {\n value: 'tab-1',\n title: 'Tab 1',\n description: 'Tab 1 description',\n },\n {\n value: 'tab-2',\n title: 'Tab 2',\n description: 'Tab 2 description',\n },\n {\n value: 'tab-3',\n title: 'Tab 3',\n description: 'Tab 3 description',\n },\n];\n\nexport const MotionHighlightTabsHoverParentDemo = () => {\n return (\n <MotionHighlight\n hover\n mode=\"parent\"\n containerClassName=\"flex border rounded-full p-1\"\n className=\"rounded-full\"\n boundsOffset={{ top: -1, left: -1 }} // we have to add an offset of the same size as the border when we set a border\n >\n {TABS.map((tab) => (\n <div\n key={tab.value}\n data-value={tab.value}\n className=\"px-3 h-8 flex items-center cursor-pointer justify-center rounded-full text-sm data-[active=true]:text-current data-[active=true]:font-medium text-muted-foreground transition-all duration-300\"\n >\n {tab.title}\n </div>\n ))}\n </MotionHighlight>\n );\n};\n",
|
|
"type": "registry:ui",
|
|
"target": "components/animate-ui/demo/effects/motion-highlight-tabs-hover-parent.tsx"
|
|
}
|
|
]
|
|
} |