import { useState } from "react";
const Task = [
{
id: 1,
title: "First Task",
},
{
id: 2,
title: "Second Task",
},
{
id: 3,
title: "Second Task",
},
];
function App() {
const [task, setTask] = useState(Task);
return (
<>
<div className=" mx-auto bg-slate-600/30 w-[600px] mt-8 pb-12 shadow-sm shadow-zinc-50">
<h2 className="text-white text-center pt-5 text-2xl font-bold mb-5">
{" "}
Todo App
</h2>
<div className="flex items-center justify-center">
<form>
<input
type="text"
placeholder="Add Task"
className="pl-2 outline-none"
/>
<button className="bg-green-600 px-8 text-white hover:bg-green-700">
submit task
</button>
</form>
</div>
{/* LIST IS HERE */}
{task &&
task.map((item) => (
<div
key={item.id}
className="flex items-center justify-between bg-blue-700 w-[390px] mx-auto mt-2"
>
<span>
<p className="pl-2 text-white text-sm ">{item.title}</p>
</span>
<div>
<button className="bg-green-600 text-white px-3 mr-1 hover:bg-green-500 ">
✔️
</button>
<button className="bg-pink-900 text-white px-3 hover:bg-green-500">
✏️
</button>
<button className="bg-red-600 text-white px-3 ml-1 hover:bg-green-500 ">
🚮
</button>
</div>
</div>
))}
</div>
</>
);
}
export default App;
