feat: pregressbar width changes on task completed

app/pip/page.tsx

@@ -1,10 +1,12 @@
+"use client";
 import NavigationBar from "@/components/NavigationBar";
 import PipResource from "@/components/PipResource";
 import PipTask from "@/components/PipTask";
 import ProgressBar from "@/components/Progressbar";
+import { useState } from "react";
 
 const PIP = () => {
-  const tasks = [
+  const [tasks, setTasks] = useState([
     {
       id: 1,
       title: "Ir con el psicólogo",
@@ -65,7 +67,7 @@ const PIP = () => {
       description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
       isDone: false,
     },
-  ];
+  ]);
 
   const resources = [
     {
@@ -96,6 +98,12 @@ const PIP = () => {
     (tasks.filter((task) => task.isDone).length / tasks.length) * 100,
   );
 
+  const handleCheckTask = (index: number) => {
+    const newTasks = [...tasks];
+    newTasks[index].isDone = !newTasks[index].isDone;
+    setTasks(newTasks);
+  };
+
   return (
     <main className="overflow-y-hidden">
       <NavigationBar />
@@ -113,6 +121,7 @@ const PIP = () => {
               title={task.title}
               description={task.description}
               isDone={task.isDone}
+              handleCheck={() => handleCheckTask(index)}
               key={index}
             />
           ))}

components/PipTask.tsx

@@ -5,13 +5,15 @@ interface InterfacePipTask {
   title: string;
   description: string;
   isDone: boolean;
+  handleCheck: () => void;
 }
 
-const PipTask = ({ title, description, isDone }: InterfacePipTask) => {
-  const [done, setIsDone] = useState<boolean>(isDone);
-  const handleDone = () => {
-    setIsDone(!done);
-  };
+const PipTask = ({
+  title,
+  description,
+  isDone,
+  handleCheck,
+}: InterfacePipTask) => {
   return (
     <div className="box-border h-48 w-52 shrink-0 rounded-xl bg-white px-2 py-9 shadow-lg">
       <header className="flex items-center">
@@ -23,7 +25,9 @@ const PipTask = ({ title, description, isDone }: InterfacePipTask) => {
           >
             <input
               type="checkbox"
+              onChange={handleCheck}
               className="h-6 w-6 cursor-pointer appearance-none rounded-full border border-primary border-primary/80 bg-primary-light/20 outline-primary transition-all checked:bg-primary checked:before:bg-primary hover:scale-105"
+              checked={isDone}
               id="checkbox-pip-input"
             />
           </label>

components/Progressbar.tsx

@@ -7,7 +7,7 @@ const ProgressBar = ({ width, height }: InterfaceProgressBar) => {
   return (
     <div className="w-100 rounded-full bg-gray-200 p-1.5">
       <div
-        className={`h-${height} rounded-full bg-gradient-to-r from-primary to-secondary`}
+        className={`h-${height} rounded-full bg-gradient-to-r from-primary to-secondary transition-all delay-100 ease-linear`}
         style={{ width: `${width}%` }}
       />
     </div>