'use client'; import { useState } from 'react'; import { motion } from 'motion/react'; import { CheckCircle2, Clock, Circle } from 'lucide-react'; type Item = { id: string; title: string; description: string; status: 'done' | 'in-progress' | 'todo'; }; const items: Item[] = [ { id: '1', title: 'Wireframe landing page', description: 'Sketch initial layout and content structure', status: 'done', }, { id: '2', title: 'Setup project repo', description: 'Initialize Next.js project with tooling', status: 'done', }, { id: '3', title: 'Design UI components', description: 'Create reusable components for LumenUI', status: 'in-progress', }, { id: '4', title: 'Integrate animations', description: 'Add motion and transitions across components', status: 'in-progress', }, { id: '5', title: 'Write documentation', description: 'Document components with examples', status: 'todo', }, ]; const statusIcon = { done: CheckCircle2, 'in-progress': Clock, todo: Circle, }; export default function List() { const [selected, setSelected] = useState(items[0].id); return (

{items.map((item) => { const Icon = statusIcon[item.status]; const isActive = selected === item.id; return ( setSelected(item.id)} className={`flex cursor-pointer items-start gap-3 rounded-xl border px-4 py-4 ${ isActive ? 'bg-neutral-900 text-white dark:bg-white dark:text-neutral-900' : 'border-neutral-200/70 bg-white/60 hover:bg-neutral-100/70 dark:border-neutral-800/70 dark:bg-neutral-900/60 dark:hover:bg-neutral-800/70' }`} >

{item.title}

{item.description}

{isActive && ( )} ); })}

); }

List

Installation

Usage