TurTaskProject/TurTaskWeb
1
0
Fork 0
mirror of https://github.com/TurTaskProject/TurTaskWeb.git synced 2025-12-19 22:14:07 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add checkbox handler

Browse Source
This commit is contained in:
sosokker 2023-11-17 12:01:44 +07:00
parent 14c56707a8
commit f8f6495a61
1 changed files with 21 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
frontend/src/components/EisenhowerMatrix/Eisenhower.jsx
View File

@ -1,22 +1,34 @@
import React from "react"; import React, { useState } from "react";
import { FiAlertCircle, FiClock, FiXCircle, FiCheckCircle } from "react-icons/fi"; import { FiAlertCircle, FiClock, FiXCircle, FiCheckCircle } from "react-icons/fi";
function EachBlog({ name, colorCode, contentList, icon }) { function EachBlog({ name, colorCode, contentList, icon }) {
const [tasks, setTasks] = useState(contentList);
const handleCheckboxChange = index => {
const updatedTasks = [...tasks];
updatedTasks[index].checked = !updatedTasks[index].checked;
setTasks(updatedTasks);
};
return ( return (
<div <div className={`h-full text-left p-4 rounded-lg bg-white border border-gray-300 overflow-y-auto`}>
className={`h-full text-left p-4 rounded-lg bg-white border border-gray-300 overflow-y-auto`}> <div className="flex" style={{ color: colorCode }}>
<div className="flex" style={{ color: colorCode }}> <span className="mx-2 mt-1">{icon}</span>
<span className="mx-2 mt-1">{icon}</span> <span>{name}</span>
<span>{name}</span>
</div> </div>
<hr className="my-3 h-0.5 border-t-0 bg-gray-300 opacity-100 dark:opacity-50" /> <hr className="my-3 h-0.5 border-t-0 bg-gray-300 opacity-100 dark:opacity-50" />
<div className="space-y-2"> <div className="space-y-2">
{contentList.length === 0 ? ( {tasks.length === 0 ? (
<p className="text-gray-500 text-center">No tasks</p> <p className="text-gray-500 text-center">No tasks</p>
) : ( ) : (
contentList.map((item, index) => ( tasks.map((item, index) => (
<div key={index} className="flex items-start"> <div key={index} className="flex items-start">
<input type="checkbox" checked={item.checked} className="checkbox mt-1 mr-2" /> <input
type="checkbox"
checked={item.checked}
className="checkbox mt-1 mr-2"
onChange={() => handleCheckboxChange(index)}
/>
<label className="cursor-pointer">{item.text}</label> <label className="cursor-pointer">{item.text}</label>
</div> </div>
)) ))