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 checked and range handler

Browse Source
This commit is contained in:
sosokker 2023-11-17 23:07:42 +07:00
parent fd842eae5e
commit 0962ff1330
1 changed files with 40 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
frontend/src/components/kanbanBoard/taskDetailModal.jsx
View File

@ -1,9 +1,23 @@
import React from "react";
import React, { useState } from "react";
import { FaTasks, FaRegListAlt } from "react-icons/fa";
import { FaPlus } from "react-icons/fa6";
import { TbChecklist } from "react-icons/tb";
function TaskDetailModal() {
const [difficulty, setDifficulty] = useState(50);
const [isChallengeChecked, setChallengeChecked] = useState(true);
const [isImportantChecked, setImportantChecked] = useState(true);
const handleChallengeChange = () => {
setChallengeChecked(!isChallengeChecked);
};
const handleImportantChange = () => {
setImportantChecked(!isImportantChecked);
};
const handleDifficultyChange = event => {
setDifficulty(parseInt(event.target.value, 10));
};
return (
<dialog id="task_detail_modal" className="modal">
@ -64,7 +78,16 @@ function TaskDetailModal() {
{/* Difficulty, Challenge and Importance */}
<div className="flex flex-row space-x-3 my-4">
<div className="flex-1 card shadow border-2 p-2">
<input type="range" id="difficultySelector" min={0} max="100" value="50" className="range" step="25" />
<input
type="range"
id="difficultySelector"
min={0}
max="100"
value={difficulty}
className="range"
step="25"
onChange={handleDifficultyChange}
/>
<div className="w-full flex justify-between text-xs px-2 space-x-2">
<span>Easy</span>
<span>Normal</span>
@ -73,19 +96,32 @@ function TaskDetailModal() {
<span>Devil</span>
</div>
</div>
{/* Challenge Checkbox */}
<div className="card shadow border-2 p-2">
<div className="form-control">
<label className="label cursor-pointer space-x-2">
<span className="label-text">Challenge</span>
<input type="checkbox" checked="checked" className="checkbox" />
<input
type="checkbox"
checked={isChallengeChecked}
className="checkbox"
onChange={handleChallengeChange}
/>
</label>
</div>
</div>
{/* Important Checkbox */}
<div className="card shadow border-2 p-2">
<div className="form-control">
<label className="label cursor-pointer space-x-2">
<span className="label-text">Important</span>
<input type="checkbox" checked="checked" className="checkbox" />
<input
type="checkbox"
checked={isImportantChecked}
className="checkbox"
onChange={handleImportantChange}
/>
</label>
</div>
</div>