50 lines
1.1 KiB
TypeScript
50 lines
1.1 KiB
TypeScript
import { useState } from "react"
|
|
import type { Task } from "./assets/types/task";
|
|
|
|
function App() {
|
|
const [tasks, setTasks] = useState<Task[]>([]);
|
|
const [inputValue, setInputValue] = useState<string>('');
|
|
|
|
const addTask = () => {
|
|
if (inputValue.trim() === '') return;
|
|
|
|
const newTask: Task = {
|
|
id: Date.now(),
|
|
title: inputValue,
|
|
completed: false,
|
|
createdAt: new Date().toISOString()
|
|
};
|
|
|
|
setTasks([...tasks, newTask]);
|
|
|
|
setInputValue('');
|
|
};
|
|
|
|
return (
|
|
<div className="container">
|
|
<h1>SmartX Task Manager</h1>
|
|
|
|
<div className="input-group">
|
|
<input
|
|
type="text"
|
|
value={inputValue}
|
|
onChange={(e) => setInputValue(e.target.value)}
|
|
/>
|
|
<button onClick={addTask}>Add</button>
|
|
</div>
|
|
<div className="task-list">
|
|
{tasks.length === 0 ? (
|
|
<p>No task found. Lets add!</p>
|
|
) : (
|
|
<ul>
|
|
{tasks.map(task => (
|
|
<li key={task.id}>{task.title}</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default App |