Task Mate - Copy this React, Tailwind Component to your project

// src/views/HomeView.jsx import React, { useState } from 'react'; import AddTask from '../components/AddTask'; import ShowTask from '../components/ShowTask'; import TaskFilter from '../components/TaskFilter'; const HomeView = () => { const [tasklist, setTasklist] = useState([]); // State to manage list of tasks const [task, setTask] = useState({}); // State to manage the task being added/edited const [filter, setFilter] = useState("all"); // State to manage task filtering (e.g., all, completed, incomplete) const filteredTasks = tasklist.filter((task) => { if (filter === "completed") { return task.completed; } else if (filter === "incomplete") { return !task.completed; } else { return true; // "all" filter or any other filter shows all tasks } }); return ( <div className="home-view"> <h1>Welcome to TaskMate!</h1> {/* Welcome message */} {/* AddTask component to allow adding or editing tasks */} <AddTask tasklist={tasklist} setTasklist={setTasklist} task={task} setTask={setTask} /> {/* TaskFilter component to filter tasks based on their completion status */} <TaskFilter filter={filter} setFilter={setFilter} // Allow the user to change filter criteria (Module F implementation) /> {/* ShowTask component to display the filtered tasks and allow actions like editing, deleting, and completing */} <ShowTask tasklist={filteredTasks} // Pass filtered tasks based on the filter state (Module F integration) setTasklist={setTasklist} setTask={setTask} /> </div> ); }; export default HomeView; based on this help me improve my UI