{todos.map((todo) => ( ))}

); } interface Todo { id: number; text: string; checked: boolean; } const TodoItem: React.FC<{ todo: Todo; onArchive: (todo: Todo) => void; }> = ({ todo, onArchive }) => { const [isChecked, setIsChecked] = useState(todo.checked); const handleToggle = () => { if (!isChecked) { setIsChecked(true); onArchive(todo); } }; return (

{todo.text}

); }; `,__src__:"src/registry/core/ui/animated-list.tsx",__event__:"copy_usage_code",children:(0,e.jsxs)(n.code,{"data-language":"tsx","data-theme":"vesper",style:{display:"grid"},children:[(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#99FFE4"},children:"'use client'"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:";"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" { AnimatePresence, motion } "}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#99FFE4"},children:" 'framer-motion'"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:";"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" React, { useState } "}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#99FFE4"},children:" 'react'"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:";"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" { Icons } "}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#99FFE4"},children:" '@/components/icons'"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:";"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" AnimatedCheck "}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#99FFE4"},children:" '@/core/ui/animated-check'"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:";"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"export"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" const"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" seeds "}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" ["})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#99FFE4"},children:" 'Buy groceries'"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:","})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#99FFE4"},children:" 'Call mom'"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:","})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#99FFE4"},children:" 'Clean the kitchen'"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:","})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#99FFE4"},children:" 'Email colleague'"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:","})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#99FFE4"},children:" 'Write report'"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:","})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#99FFE4"},children:" 'Organize clothes'"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:","})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#99FFE4"},children:" 'Schedule meeting'"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:","})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#99FFE4"},children:" 'Research project plan'"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:","})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#99FFE4"},children:" 'Update budget'"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:","})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#99FFE4"},children:" 'Prepare presentation'"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:","})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"];"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"const"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" ANIMATION_DURATION "}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:" 0.3"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:";"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"interface"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:" Todo"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" {"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" id"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:":"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:" number"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:";"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" text"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:":"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:" string"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:";"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" checked"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:":"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:" boolean"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:";"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"}"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"export"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" function"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:" AnimatedList"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"() {"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" const"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" [id, setId] "}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:" useState"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"(seeds.length "}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"+"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:" 1"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:");"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" const"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" [todos, setTodos] "}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:" useState"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"<"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:"Todo"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"[]>("})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" seeds."}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:"slice"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"("}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:"0"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:", "}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:"10"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:")."}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:"map"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"((text, index) "}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"=>"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" ({"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" id: index "}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"+"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:" 1"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:","})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" text,"})}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" checked: "}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:"false"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:","})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" })),"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" );"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" const"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:" addTodo"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" ="}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" () "}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"=>"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" {"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:" setTodos"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"((prevTodos) "}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"=>"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" ["})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" { id, text: seeds[id "}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"%"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" seeds.length], checked: "}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:"false"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" },"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" ..."}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"prevTodos,"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" ]);"})}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:" setId"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"((prevId) "}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"=>"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" prevId "}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"+"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:" 1"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:");"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" };"})}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" const"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:" archiveTodo"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" ="}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" (todoToArchive"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:":"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:" Todo"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:") "}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"=>"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" {"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:" setTimeout"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"(() "}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"=>"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" {"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:" setTodos"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"((currentTodos) "}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"=>"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" currentTodos."}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:"filter"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"((todo) "}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"=>"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" todo.id "}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"!=="}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" todoToArchive.id),"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" );"})}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" }, ANIMATION_DURATION "}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"*"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:" 1000"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:");"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" };"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" return"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" ("})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:"div"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" className="}),(0,e.jsx)(n.span,{style:{color:"#99FFE4"},children:"'w-full items-center justify-center overscroll-y-contain py-8 '"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:">"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:"div"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" className="}),(0,e.jsx)(n.span,{style:{color:"#99FFE4"},children:"'relative flex flex-col max-h-[300px] w-full max-w-lg mx-auto my-8 bg-white dark:bg-black rounded-xl border border-zinc-200 shadow-md dark:border-stone-700 dark:shadow-none'"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:">"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:"div"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" className="}),(0,e.jsx)(n.span,{style:{color:"#99FFE4"},children:"'flex justify-between border-b border-zinc-200 dark:border-stone-700 p-4'"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:">"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:"button"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" onClick={"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"addTodo"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" className="}),(0,e.jsx)(n.span,{style:{color:"#99FFE4"},children:"'text-zinc-400 dark:text-stone-400 transition-colors duration-600 ease-in hover:text-zinc-800 dark:hover:text-stone-300 active:text-zinc-900 dark:active:text-stone-200'"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" >"})}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:"Icons.Plus"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" className="}),(0,e.jsx)(n.span,{style:{color:"#99FFE4"},children:"'h-6 w-6'"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" />"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:"div"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" className="}),(0,e.jsx)(n.span,{style:{color:"#99FFE4"},children:"'max-h-[300px] overflow-y-auto p-4'"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:">"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:"AnimatePresence"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" initial={"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:"false"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}>"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" {"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"todos."}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:"map"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"((todo) "}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"=>"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" ("})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:"TodoItem"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" key={"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"todo.id"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" todo={"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"todo"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" onArchive={"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"archiveTodo"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" />"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" ))"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" );"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"}"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"interface"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:" Todo"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" {"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" id"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:":"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:" number"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:";"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" text"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:":"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:" string"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:";"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" checked"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:":"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:" boolean"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:";"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"}"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"const"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" TodoItem"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:":"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:" React"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"."}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:"FC"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"<{"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" todo"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:":"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:" Todo"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:";"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:" onArchive"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:":"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" (todo"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:":"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:" Todo"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:") "}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"=>"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:" void"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:";"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"}> "}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" ({ todo, onArchive }) "}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"=>"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" {"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" const"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" [isChecked, setIsChecked] "}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:" useState"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"(todo.checked);"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" const"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:" handleToggle"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" ="}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" () "}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"=>"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" {"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" if"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" ("}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"!"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"isChecked) {"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:" setIsChecked"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"("}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:"true"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:");"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:" onArchive"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"(todo);"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" }"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" };"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" return"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" ("})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:"motion.div"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" initial={"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"{ height: "}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:"0"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" }"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" animate={"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"{ height: "}),(0,e.jsx)(n.span,{style:{color:"#99FFE4"},children:"'auto'"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" }"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" exit={"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"{"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" height: "}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:"0"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:","})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" opacity: "}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:"0"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:","})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" transition: {"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" height: { duration: ANIMATION_DURATION },"})}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" opacity: { duration: ANIMATION_DURATION "}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"*"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:" 0.67"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" },"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" },"})}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" }"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" style={"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"{ overflow: "}),(0,e.jsx)(n.span,{style:{color:"#99FFE4"},children:"'hidden'"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" }"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" transition={"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"{ ease: ["}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:"0.32"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:", "}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:"0.72"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:", "}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:"0"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:", "}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:"1"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"] }"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" className="}),(0,e.jsx)(n.span,{style:{color:"#99FFE4"},children:"'relative flex flex-col justify-end bg-white dark:bg-black'"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" >"})}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:"div"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" className="}),(0,e.jsx)(n.span,{style:{color:"#99FFE4"},children:"'flex items-center py-4 px-4 gap-4 hover:bg-zinc-100 dark:hover:bg-stone-800 rounded-lg'"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:">"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:"div"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" className="}),(0,e.jsx)(n.span,{style:{color:"#99FFE4"},children:"'flex cursor-pointer'"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:">"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:"button"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" className="}),(0,e.jsx)(n.span,{style:{color:"#99FFE4"},children:"'relative flex items-center'"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:">"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:"input"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" type="}),(0,e.jsx)(n.span,{style:{color:"#99FFE4"},children:"'checkbox'"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" className="}),(0,e.jsx)(n.span,{style:{color:"#99FFE4"},children:"'relative h-5 w-5 cursor-pointer appearance-none rounded-md border-2 border-zinc-300 dark:border-stone-700 transition-all duration-500 checked:border-blue-500 checked:bg-blue-500'"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" checked={"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"isChecked"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" onChange={"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"handleToggle"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" />"})}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:"div"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" className="}),(0,e.jsx)(n.span,{style:{color:"#99FFE4"},children:"'pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-white'"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:">"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:"AnimatedCheck"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" isChecked={"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"isChecked"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" className="}),(0,e.jsx)(n.span,{style:{color:"#99FFE4"},children:"'h-3.5 w-3.5'"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" />"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#FFC799"},children:"p"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" className="}),(0,e.jsx)(n.span,{style:{color:"#99FFE4"},children:"'truncate text-sm text-zinc-800 dark:text-stone-100'"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:">"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" {"}),(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"todo.text"}),(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:"}"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#A0A0A0"},children:" "})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#FFF"},children:" );"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#FFF"},children:"};"})})]})})})})}function b(l={}){let{wrapper:n}=l.components||{};return n?(0,e.jsx)(n,Object.assign({},l,{children:(0,e.jsx)(d,l)})):d(l)}var g=b;function k(l,n){throw new Error("Expected "+(n?"component":"object")+" `"+l+"` to be defined: you likely forgot to import, pass, or provide it.")}return v(f);})(); ;return Component;

Animated List

Resources