73 lines
1.7 KiB
TypeScript
73 lines
1.7 KiB
TypeScript
import React, { useState, useEffect } from " react\;
|
|
import \./App.css\;
|
|
|
|
const mockTasks = [
|
|
{ id: 1, title: \Update documentation\, status: \in_progress\, priority: \high\, assignee: \Sarah Chen\ },
|
|
{ id: 2, title: \Fix login bug\, status: \blocked\, priority: \high\, assignee: \Mike Johnson\ },
|
|
{ id: 3, title: \Design dashboard\, status: \open\, priority: \medium\, assignee: \Alex Kim\ }
|
|
];
|
|
|
|
function App() {
|
|
const [filter, setFilter] = useState(\my\);
|
|
|
|
return (
|
|
<div className=\App\>
|
|
<header className=\app-header\>
|
|
<h1>TaskFlow</h1>
|
|
<div className=\user-profile\>
|
|
<span>Sarah Chen</span>
|
|
<button className=\create-btn\>Create Task</button>
|
|
</div>
|
|
</header>
|
|
|
|
<main className=\app-main\>
|
|
<div className=\sidebar\>
|
|
<h3>Team Members</h3>
|
|
<div className=\team-list\>
|
|
<div className=\team-member\>Sarah Chen</div>
|
|
<div className=\team-member\>Mike Johnson</div>
|
|
<div className=\team-member\>Alex Kim</div>
|
|
<div className=\team-member\>Emma Davis</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className=\content\>
|
|
<div className=\filter-tabs\>
|
|
<button
|
|
className={\ ab \}
|
|
onClick={() => setFilter(\my\)}
|
|
>
|
|
My Tasks (1)
|
|
</button>
|
|
<button
|
|
className={\ ab \}
|
|
onClick={() => setFilter(\all\)}
|
|
>
|
|
All Tasks (3)
|
|
</button>
|
|
<button
|
|
className={\ ab \}
|
|
onClick={() => setFilter(\blocked\)}
|
|
>
|
|
Blocked (1)
|
|
</button>
|
|
</div>
|
|
|
|
<div className=\task-list\>
|
|
{mockTasks.map(task => (
|
|
<div key={task.id} className=\task-row\>
|
|
<div className=\task-title\>{task.title}</div>
|
|
<div className=\task-assignee\>{task.assignee}</div>
|
|
<div className={\ ask-status \}>{task.status}</div>
|
|
<div className={\ ask-priority \}>{task.priority}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default App;
|