[V0_FILE]typescriptreact:file="app/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" "use client" import { useState } from "react" import { Plus, Trash2, CheckSquare } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Checkbox } from "@/components/ui/checkbox" import { Progress } from "@/components/ui/progress" const colorClasses = [ "bg-red-100", "bg-blue-100", "bg-green-100", "bg-yellow-100", "bg-purple-100", "bg-pink-100", "bg-indigo-100", "bg-teal-100", ] interface Task { id: number text: string completed: boolean color: string } export default function Home() { const [tasks, setTasks] = useState([]) const [newTask, setNewTask] = useState("") const [isAppOpen, setIsAppOpen] = useState(false) const addTask = () => { if (newTask.trim() !== "") { const color = colorClasses[tasks.length % colorClasses.length] setTasks([...tasks, { id: Date.now(), text: newTask, completed: false, color }]) setNewTask("") } } const toggleTask = (id: number) => { setTasks(tasks.map((task) => (task.id === id ? { ...task, completed: !task.completed } : task))) } const deleteTask = (id: number) => { setTasks(tasks.filter((task) => task.id !== id)) } const completedTasks = tasks.filter((task) => task.completed).length const progress = tasks.length > 0 ? (completedTasks / tasks.length) * 100 : 0 return (

{isAppOpen ? (

Task Tracker

setNewTask(e.target.value)} placeholder="Enter a new task" className="flex-grow mr-2 bg-white/50" />

{tasks.map((task) => (

toggleTask(task.id)} /> {task.text}

))}

Progress: {completedTasks} / {tasks.length} tasks completed

) : (

{/* Add more app icons here for a fuller home screen look */}

)}

) } [V0_FILE]css:file="app/globals.css" isEdit="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 222.2 47.4% 11.2%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 222.2 84% 4.9%; --radius: 0.5rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 210 40% 98%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 212.7 26.8% 83.9%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } /* Custom styles for iOS-like appearance */ .ios-status-bar { height: 44px; background-color: rgba(255, 255, 255, 0.8); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: space-between; padding: 0 16px; font-size: 12px; font-weight: 600; } .ios-home-indicator { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); width: 134px; height: 5px; background-color: #000; border-radius: 100px; } /* App icon styles */ .app-icon { width: 60px; height: 60px; border-radius: 15px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 10px; color: white; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); } .app-icon-label { margin-top: 4px; }

About

About