21 lines
3.4 KiB
JSON
21 lines
3.4 KiB
JSON
{
|
|
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
|
"name": "playful-todolist",
|
|
"type": "registry:ui",
|
|
"title": "Playful Todolist",
|
|
"description": "Playful Todolist Component",
|
|
"dependencies": [
|
|
"motion"
|
|
],
|
|
"registryDependencies": [
|
|
"https://animate-ui.com/r/radix-checkbox"
|
|
],
|
|
"files": [
|
|
{
|
|
"path": "registry/ui-elements/playful-todolist/index.tsx",
|
|
"content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type Transition } from 'motion/react';\nimport { Label } from '@/components/ui/label';\nimport { Checkbox } from '@/components/animate-ui/radix/checkbox';\n\nconst checkboxItems = [\n {\n id: 1,\n label: 'Code in Assembly 💾',\n defaultChecked: false,\n },\n {\n id: 2,\n label: 'Present a bug as a feature 🪲',\n defaultChecked: false,\n },\n {\n id: 3,\n label: 'Push to prod on a Friday 🚀',\n defaultChecked: false,\n },\n];\n\nconst getPathAnimate = (isChecked: boolean) => ({\n pathLength: isChecked ? 1 : 0,\n opacity: isChecked ? 1 : 0,\n});\n\nconst getPathTransition = (isChecked: boolean): Transition => ({\n pathLength: { duration: 1, ease: 'easeInOut' },\n opacity: {\n duration: 0.01,\n delay: isChecked ? 0 : 1,\n },\n});\n\nfunction PlayfulTodolist() {\n const [checked, setChecked] = React.useState(\n checkboxItems.map((i) => !!i.defaultChecked),\n );\n\n return (\n <div className=\"bg-neutral-100 dark:bg-neutral-900 rounded-2xl p-6 space-y-6\">\n {checkboxItems.map((item, idx) => (\n <div key={item.id} className=\"space-y-6\">\n <div className=\"flex items-center space-x-2\">\n <Checkbox\n checked={checked[idx]}\n onCheckedChange={(val) => {\n const updated = [...checked];\n updated[idx] = val === true;\n setChecked(updated);\n }}\n id={`checkbox-${item.id}`}\n />\n <div className=\"relative inline-block\">\n <Label htmlFor={`checkbox-${item.id}`}>{item.label}</Label>\n <motion.svg\n width=\"340\"\n height=\"32\"\n viewBox=\"0 0 340 32\"\n className=\"absolute left-0 top-1/2 -translate-y-1/2 pointer-events-none z-20 w-full h-10\"\n >\n <motion.path\n d=\"M 10 16.91 s 79.8 -11.36 98.1 -11.34 c 22.2 0.02 -47.82 14.25 -33.39 22.02 c 12.61 6.77 124.18 -27.98 133.31 -17.28 c 7.52 8.38 -26.8 20.02 4.61 22.05 c 24.55 1.93 113.37 -20.36 113.37 -20.36\"\n vectorEffect=\"non-scaling-stroke\"\n strokeWidth={2}\n strokeLinecap=\"round\"\n strokeMiterlimit={10}\n fill=\"none\"\n initial={false}\n animate={getPathAnimate(!!checked[idx])}\n transition={getPathTransition(!!checked[idx])}\n className=\"stroke-neutral-900 dark:stroke-neutral-100\"\n />\n </motion.svg>\n </div>\n </div>\n {idx !== checkboxItems.length - 1 && (\n <div className=\"border-t border-neutral-300 dark:border-neutral-700\" />\n )}\n </div>\n ))}\n </div>\n );\n}\n\nexport { PlayfulTodolist };\n",
|
|
"type": "registry:ui",
|
|
"target": "components/animate-ui/ui-elements/playful-todolist.tsx"
|
|
}
|
|
]
|
|
} |