Playful Todolist

1'use client';
2 
3import * as React from 'react';
4import { motion, type Transition } from 'motion/react';
5import { Label } from '@/components/ui/label';
6import { Checkbox } from '@/components/animate-ui/components/radix/checkbox';
7 
8const checkboxItems = [
9  {
10    id: 1,
11    label: 'Code in Assembly 💾',
12    defaultChecked: false,
13  },
14  {
15    id: 2,
16    label: 'Present a bug as a feature 🪲',
17    defaultChecked: false,
18  },
19  {
20    id: 3,
21    label: 'Push to prod on a Friday 🚀',
22    defaultChecked: false,
23  },
24];
25 
26const getPathAnimate = (isChecked: boolean) => ({
27  pathLength: isChecked ? 1 : 0,
28  opacity: isChecked ? 1 : 0,
29});
30 
31const getPathTransition = (isChecked: boolean): Transition => ({
32  pathLength: { duration: 1, ease: 'easeInOut' },
33  opacity: {
34    duration: 0.01,
35    delay: isChecked ? 0 : 1,
36  },
37});
38 
39function PlayfulTodolist() {
40  const [checked, setChecked] = React.useState(
41    checkboxItems.map((i) => !!i.defaultChecked),
42  );
43 
44  return (
45    <div className="bg-neutral-100 dark:bg-neutral-900 rounded-2xl p-6 space-y-6">
46      {checkboxItems.map((item, idx) => (
47        <div key={item.id} className="space-y-6">
48          <div className="flex items-center space-x-2">
49            <Checkbox
50              variant="accent"
51              checked={checked[idx]}
52              onCheckedChange={(val) => {
53                const updated = [...checked];
54                updated[idx] = val === true;
55                setChecked(updated);
56              }}
57              id={`checkbox-${item.id}`}
58            />
59            <div className="relative inline-block">
60              <Label htmlFor={`checkbox-${item.id}`}>{item.label}</Label>
61              <motion.svg
62                width="340"
63                height="32"
64                viewBox="0 0 340 32"
65                className="absolute left-0 top-1/2 -translate-y-1/2 pointer-events-none z-20 w-full h-10"
66              >
67                <motion.path
68                  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"
69                  vectorEffect="non-scaling-stroke"
70                  strokeWidth={2}
71                  strokeLinecap="round"
72                  strokeMiterlimit={10}
73                  fill="none"
74                  initial={false}
75                  animate={getPathAnimate(!!checked[idx])}
76// … truncated