1.先看效果

2.源代码

import React, { useState } from 'react'

import { CheckCircle, Circle, Flag, Calendar } from 'lucide-react'

type Task = {

id: number

title: string

completed: boolean

priority: 'low' | 'medium' | 'high'

dueDate: string

}

export default function TaskManagerCard() {

const [tasks, setTasks] = useState([

{ id: 1, title: 'Complete project proposal', completed: false, priority: 'high', dueDate: '2023-06-15' },

{ id: 2, title: 'Review team performance', completed: false, priority: 'medium', dueDate: '2023-06-20' },

{ id: 3, title: 'Update client presentation', completed: true, priority: 'low', dueDate: '2023-06-18' },

{ id: 4, title: 'Prepare monthly report', completed: false, priority: 'high', dueDate: '2023-06-30' },

])

const toggleTask = (id: number) => {

setTasks(tasks.map(task =>

task.id === id ? { ...task, completed: !task.completed } : task

))

}

const getPriorityColor = (priority: string) => {

switch(priority) {

case 'low': return 'bg-green-500'

case 'medium': return 'bg-yellow-500'

case 'high': return 'bg-red-500'

default: return 'bg-gray-500'

}

}

const completedTasks = tasks.filter(task => task.completed).length

const progress = (completedTasks / tasks.length) * 100

return (

)

}