[V0_FILE]typescriptreact:file="tailwind.config.ts" isEdit="true" isMerged="true" import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, // Custom palette custom: { dark: "#2E2C2F", slate: "#475B63", green: "#729B79", lightGreen: "#BACDB0", cream: "#F3E8EE", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config export default config [V0_FILE]typescriptreact:file="app/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" "use client" import { useState, useEffect } from "react" import { Plus, Trash2 } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Checkbox } from "@/components/ui/checkbox" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" // Types interface Task { id: string text: string completed: boolean } interface TodoList { id: string name: string tasks: Task[] } interface Group { id: string name: string lists: TodoList[] } export default function TodoApp() { // State const [groups, setGroups] = useState([]) const [newGroupName, setNewGroupName] = useState("") const [newListName, setNewListName] = useState("") const [newTaskText, setNewTaskText] = useState("") const [activeGroup, setActiveGroup] = useState(null) const [activeList, setActiveList] = useState(null) // Load data from localStorage on initial render useEffect(() => { const savedGroups = localStorage.getItem("todoGroups") if (savedGroups) { const parsedGroups = JSON.parse(savedGroups) setGroups(parsedGroups) // Set active group and list if available if (parsedGroups.length > 0) { setActiveGroup(parsedGroups[0].id) if (parsedGroups[0].lists.length > 0) { setActiveList(parsedGroups[0].lists[0].id) } } } }, []) // Save to localStorage whenever groups change useEffect(() => { localStorage.setItem("todoGroups", JSON.stringify(groups)) }, [groups]) // Handlers const handleAddGroup = () => { if (newGroupName.trim() === "") return const newGroup: Group = { id: crypto.randomUUID(), name: newGroupName, lists: [], } setGroups([...groups, newGroup]) setNewGroupName("") setActiveGroup(newGroup.id) } const handleAddList = () => { if (newListName.trim() === "" || !activeGroup) return const newList: TodoList = { id: crypto.randomUUID(), name: newListName, tasks: [], } const updatedGroups = groups.map((group) => { if (group.id === activeGroup) { return { ...group, lists: [...group.lists, newList], } } return group }) setGroups(updatedGroups) setNewListName("") setActiveList(newList.id) } const handleAddTask = (listId: string) => { if (newTaskText.trim() === "" || !activeGroup) return const newTask: Task = { id: crypto.randomUUID(), text: newTaskText, completed: false, } const updatedGroups = groups.map((group) => { if (group.id === activeGroup) { return { ...group, lists: group.lists.map((list) => { if (list.id === listId) { return { ...list, tasks: [...list.tasks, newTask], } } return list }), } } return group }) setGroups(updatedGroups) setNewTaskText("") } const handleToggleTask = (listId: string, taskId: string) => { const updatedGroups = groups.map((group) => { if (group.id === activeGroup) { return { ...group, lists: group.lists.map((list) => { if (list.id === listId) { return { ...list, tasks: list.tasks.map((task) => { if (task.id === taskId) { return { ...task, completed: !task.completed, } } return task }), } } return list }), } } return group }) setGroups(updatedGroups) } const handleDeleteTask = (listId: string, taskId: string) => { const updatedGroups = groups.map((group) => { if (group.id === activeGroup) { return { ...group, lists: group.lists.map((list) => { if (list.id === listId) { return { ...list, tasks: list.tasks.filter((task) => task.id !== taskId), } } return list }), } } return group }) setGroups(updatedGroups) } const handleDeleteList = (listId: string) => { const updatedGroups = groups.map((group) => { if (group.id === activeGroup) { return { ...group, lists: group.lists.filter((list) => list.id !== listId), } } return group }) setGroups(updatedGroups) // Update active list if needed const currentGroup = updatedGroups.find((g) => g.id === activeGroup) if (currentGroup && currentGroup.lists.length > 0) { setActiveList(currentGroup.lists[0].id) } else { setActiveList(null) } } const handleDeleteGroup = (groupId: string) => { const updatedGroups = groups.filter((group) => group.id !== groupId) setGroups(updatedGroups) // Update active group if needed if (updatedGroups.length > 0) { setActiveGroup(updatedGroups[0].id) if (updatedGroups[0].lists.length > 0) { setActiveList(updatedGroups[0].lists[0].id) } else { setActiveList(null) } } else { setActiveGroup(null) setActiveList(null) } } // Find current group and list const currentGroup = groups.find((group) => group.id === activeGroup) return (

Todo List Groups

{/* Sidebar with groups */}

setNewGroupName(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter") handleAddGroup() }} className="bg-custom-slate/20 border-custom-slate/30 focus:ring-custom-green text-custom-cream placeholder-custom-cream/50" />

{groups.map((group) => (

{ setActiveGroup(group.id) if (group.lists.length > 0) { setActiveList(group.lists[0].id) } else { setActiveList(null) } }} > {group.name}

))}

{/* Main content */}

{currentGroup ? (

{currentGroup.name}

{currentGroup.lists.length > 0 ? ( {currentGroup.lists.map((list) => ( {list.name} ))}

{currentGroup.lists.map((list) => ( {list.name} handleDeleteList(list.id)} > Delete List

setNewTaskText(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter") handleAddTask(list.id) }} className="bg-custom-slate/20 border-custom-slate/30 focus:ring-custom-green text-custom-cream placeholder-custom-cream/50" />

{list.tasks.length === 0 ? (

No tasks yet. Add one above!

) : ( list.tasks.map((task) => (

handleToggleTask(list.id, task.id)} id={task.id} className="border-custom-green data-[state=checked]:bg-custom-green data-[state=checked]:text-custom-dark" /> {task.text}

)) )}

))}

) : (

No lists in this group yet.

)}

) : (

No groups yet. Create one to get started!

)}

) } [V0_FILE]css:file="app/globals.css" isEdit="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 340 25% 97%; --foreground: 285 4% 18%; --card: 340 25% 97%; --card-foreground: 285 4% 18%; --popover: 340 25% 97%; --popover-foreground: 285 4% 18%; --primary: 134 22% 53%; --primary-foreground: 340 25% 97%; --secondary: 95 25% 75%; --secondary-foreground: 285 4% 18%; --muted: 200 15% 33%; --muted-foreground: 340 25% 97%; --accent: 95 25% 75%; --accent-foreground: 285 4% 18%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 200 15% 33%; --input: 200 15% 33%; --ring: 134 22% 53%; --radius: 1rem; } .dark { --background: 285 4% 18%; --foreground: 340 25% 97%; --card: 200 15% 33%; --card-foreground: 340 25% 97%; --popover: 285 4% 18%; --popover-foreground: 340 25% 97%; --primary: 134 22% 53%; --primary-foreground: 340 25% 97%; --secondary: 95 25% 75%; --secondary-foreground: 285 4% 18%; --muted: 200 15% 33%; --muted-foreground: 340 25% 97%; --accent: 95 25% 75%; --accent-foreground: 285 4% 18%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 200 15% 33%; --input: 200 15% 33%; --ring: 134 22% 53%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } /* Custom cube styling */ .cube-card { @apply rounded-2xl transition-all duration-300 transform hover:translate-y-[-5px] hover:shadow-lg; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); perspective: 1000px; } .cube-list { @apply bg-card rounded-xl shadow-md transition-all duration-300 hover:shadow-lg; transform-style: preserve-3d; transform: translateZ(0); } .cube-task { @apply border-custom-slate/30 bg-custom-slate/10 hover:bg-custom-slate/20 transition-all duration-200; } /* Dark mode specific styles */ .dark .cube-card { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.1); } .dark .cube-task { @apply border-custom-slate/30 bg-custom-slate/10 hover:bg-custom-slate/20; }

About

About