63 lines
3.9 KiB
JSON
63 lines
3.9 KiB
JSON
{
|
|
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
|
"name": "base-preview-card-demo",
|
|
"type": "registry:ui",
|
|
"title": "Base Preview Card Demo",
|
|
"description": "Demo showing a base preview card.",
|
|
"registryDependencies": [
|
|
"https://animate-ui.com/r/base-preview-card"
|
|
],
|
|
"files": [
|
|
{
|
|
"path": "registry/demo/base/preview-card/index.tsx",
|
|
"content": "import {\n PreviewCard,\n PreviewCardTrigger,\n PreviewCardContent,\n type PreviewCardProps,\n type PreviewCardContentProps,\n} from '@/components/animate-ui/base/preview-card';\n\ntype BasePreviewCardDemoProps = Pick<PreviewCardProps, 'delay' | 'closeDelay'> &\n Pick<\n PreviewCardContentProps,\n 'side' | 'sideOffset' | 'align' | 'alignOffset'\n >;\n\nexport const BasePreviewCardDemo = ({\n delay,\n closeDelay,\n side,\n sideOffset,\n align,\n alignOffset,\n}: BasePreviewCardDemoProps) => {\n return (\n <PreviewCard delay={delay} closeDelay={closeDelay} defaultOpen>\n <PreviewCardTrigger\n render={\n <a\n className=\"size-12 rounded-full overflow-hidden border\"\n href=\"https://twitter.com/animate_ui\"\n target=\"_blank\"\n rel=\"noreferrer noopener\"\n >\n <img\n src=\"https://pbs.twimg.com/profile_images/1904970066770214912/lYBctz26_400x400.jpg\"\n alt=\"Animate UI\"\n />\n </a>\n }\n />\n <PreviewCardContent\n side={side}\n sideOffset={sideOffset}\n align={align}\n alignOffset={alignOffset}\n className=\"w-80\"\n >\n <div className=\"flex flex-col gap-4\">\n <img\n className=\"size-16 rounded-full overflow-hidden border\"\n src=\"https://pbs.twimg.com/profile_images/1904970066770214912/lYBctz26_400x400.jpg\"\n alt=\"Animate UI\"\n />\n <div className=\"flex flex-col gap-4\">\n <div>\n <div className=\"font-bold\">Animate UI</div>\n <div className=\"text-sm text-muted-foreground\">@animate_ui</div>\n </div>\n <div className=\"text-sm text-muted-foreground\">\n A fully animated, open-source component distribution built with\n React, TypeScript, Tailwind CSS, and Motion.\n </div>\n <div className=\"flex gap-4\">\n <div className=\"flex gap-1 text-sm items-center\">\n <div className=\"font-bold\">0</div>{' '}\n <div className=\"text-muted-foreground\">Following</div>\n </div>\n <div className=\"flex gap-1 text-sm items-center\">\n <div className=\"font-bold\">2,900</div>{' '}\n <div className=\"text-muted-foreground\">Followers</div>\n </div>\n </div>\n </div>\n </div>\n </PreviewCardContent>\n </PreviewCard>\n );\n};\n",
|
|
"type": "registry:ui",
|
|
"target": "components/animate-ui/demo/base/preview-card.tsx"
|
|
}
|
|
],
|
|
"meta": {
|
|
"demoProps": {
|
|
"PreviewCard": {
|
|
"delay": {
|
|
"value": 600,
|
|
"min": 0,
|
|
"max": 2000,
|
|
"step": 100
|
|
},
|
|
"closeDelay": {
|
|
"value": 300,
|
|
"min": 0,
|
|
"max": 2000,
|
|
"step": 100
|
|
}
|
|
},
|
|
"PreviewCardContent": {
|
|
"side": {
|
|
"value": "bottom",
|
|
"options": {
|
|
"top": "top",
|
|
"bottom": "bottom",
|
|
"left": "left",
|
|
"right": "right",
|
|
"inline-start": "inline-start",
|
|
"inline-end": "inline-end"
|
|
}
|
|
},
|
|
"sideOffset": {
|
|
"value": 10
|
|
},
|
|
"align": {
|
|
"value": "center",
|
|
"options": {
|
|
"start": "start",
|
|
"center": "center",
|
|
"end": "end"
|
|
}
|
|
},
|
|
"alignOffset": {
|
|
"value": 0
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} |