{"/styles.css":{"code":"/* write your css code here */\n"},"/tsconfig.json":{"code":"{\n \"include\": [\n \"./**/*\"\n ],\n \"compilerOptions\": {\n \"strict\": true,\n \"esModuleInterop\": true,\n \"lib\": [ \"dom\", \"es2015\" ],\n \"jsx\": \"react-jsx\"\n }\n}"},"/App.tsx":{"code":"import React, {useEffect, useState} from 'react'\nimport { motion, useAnimate, AnimatePresence } from 'motion/react';\nimport './styles.css';\n\nexport default function App() {\n\n const dummyTodos = [\n { id: 0, title: 'Buy Groceries', checked: false },\n { id: 1, title: 'Buy Something else', checked: false }\n ];\n const [todos, setTodos] = useState(dummyTodos);\n\n const handleTodoClick = (id: number) => {\n setTodos(todos.map(todo => {\n if (todo.id === id) {\n return { ...todo, checked: !todo.checked }\n }\n return todo;\n }));\n };\n\n const [scope, animate] = useAnimate();\n\n return (\n

\n Peerlist Challenge!\n

\n\n

\n // Animate presence on top of todos\n {todos.map((todo, idx) =>\n handleTodoClick(todo.id)}\n className=\"flex gap-2 items-center font-light bg-transparent hover:bg-neutral-800 py-2 px-4 rounded-md w-fit cursor-pointer\">\n\n \n\n \n \n \n\n \n\n\n \n \n \n \n {todo.title}\n \n \n \n )}\n \n

\n );\n}\n\n\n\n\n"},"/index.tsx":{"code":"import React, { StrictMode } from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\n\nimport App from \"./App\";\n\nconst root = createRoot(document.getElementById(\"root\"));\nroot.render(\n \n \n \n);"},"/public/index.html":{"code":"\n\n \n \n \n React + Tailwind + Motion\n \n \n

\n \n"},"/package.json":{"code":"{\n \"name\": \"react-tailwind-motion\",\n \"version\": \"1.0.0\",\n \"description\": \"A simple React playground with Tailwind CSS v4 and Motion\",\n \"scripts\": {\n \"start\": \"react-scripts start\",\n \"build\": \"react-scripts build\",\n \"test\": \"react-scripts test\",\n \"eject\": \"react-scripts eject\"\n },\n \"dependencies\": {\n \"react\": \"^18.2.0\",\n \"react-dom\": \"^18.2.0\",\n \"motion\": \"12.6.5\"\n },\n \"devDependencies\": {}\n}"}}

Aceternity UI

Peerlist Challenge - Day 3

Explorer