feat: task status change

src/components/task.tsx

@@ -1,4 +1,5 @@
 import { FunctionComponent } from "preact";
+import { MouseEventHandler } from "preact/compat";
 import { tv } from "tailwind-variants";
 import classes from "./task.module.scss";
 
@@ -6,10 +7,11 @@ interface TaskProps {
   name: string;
   checked?: boolean;
   onClick?: () => void;
+  onMarkClick?: MouseEventHandler<HTMLParagraphElement>;
 }
 
 const taskStyle = tv({
-  base: "flex aspect-square h-full flex-col items-center justify-center rounded-full border",
+  base: "hover:scale-[1.1]active:scale-[1.1] flex aspect-square h-full flex-col items-center justify-center rounded-full border transition-[scale] duration-100 ease-in-out select-none",
   variants: {
     checked: {
       true: "bg-black",
@@ -28,12 +30,18 @@ const markStyle = tv({
   },
 });
 
-const Task: FunctionComponent<TaskProps> = ({ name, checked = false, onClick = () => {} }: TaskProps) => {
+const Task: FunctionComponent<TaskProps> = ({ name, checked = false, onClick = () => {}, onMarkClick = () => {} }) => {
   return (
     // Временное действие для тестирования
     <div class="w-[95%]">
       <div class={classes.task} onClick={onClick}>
-        <div class={taskStyle({ checked })}>
+        <div
+          class={taskStyle({ checked })}
+          onClick={(e) => {
+            e.stopPropagation();
+            onMarkClick(e);
+          }}
+        >
           <p class={markStyle({ checked })}>✓</p>
         </div>
         {name}
@@ -42,4 +50,6 @@ const Task: FunctionComponent<TaskProps> = ({ name, checked = false, onClick = (
   );
 };
 
+Task.displayName = "AHTask";
+
 export default Task;

src/pages/profile_tasks.tsx

@@ -238,8 +238,8 @@ const ProfileTasks: FunctionComponent = () => {
               handleSubmit((data) => saveTask({ ...data, id: tasks.length + 1 }))();
             }}
           >
-            <div class="flex w-full flex-row items-start justify-between">
+            <div class="flex w-full flex-1 flex-row items-start justify-between">
-              <div class="me-4 flex flex-1 flex-col gap-1">
+              <div class="me-4 flex h-full flex-1 flex-col gap-1">
                 <input
                   class="text-2xl outline-0"
                   maxLength={20}
@@ -247,7 +247,7 @@ const ProfileTasks: FunctionComponent = () => {
                   {...register("name", { required: "Заполните название" })}
                 />
                 <textarea
-                  class="h-[5rem] w-full resize-none outline-0"
+                  class="mb-10 w-full flex-1 resize-none outline-0"
                   placeholder="Описание"
                   maxLength={200}
                   {...register("description")}
@@ -260,14 +260,16 @@ const ProfileTasks: FunctionComponent = () => {
                 />
                 <input type="checkbox" checked={false} hidden {...register("checked")} />
               </div>
-              <CalendarDaysIcon
+              <div class="flex flex-row gap-3 self-start">
-                class="size-10 cursor-pointer"
+                <CalendarDaysIcon
-                onClick={() => {
+                  class="size-10 cursor-pointer"
-                  setOpenModalCalendar(true);
+                  onClick={() => {
-                  setCalendarDate(calendarDate ?? new Date());
+                    setOpenModalCalendar(true);
-                }}
+                    setCalendarDate(calendarDate ?? new Date());
-              />
+                  }}
-              <BookmarkIcon class="ms-4 size-10 cursor-pointer" />
+                />
+                <BookmarkIcon class="ms-4 size-10 cursor-pointer" />
+              </div>
             </div>
             {errors.name && <p class="text-red-500">{errors.name.message}</p>}
             {errors.date && <p class="text-red-500">{errors.date.message}</p>}
@@ -304,10 +306,13 @@ const ProfileTasks: FunctionComponent = () => {
                     setEditContent(task);
                     setCalendarDate(task.date);
                   }}
+                  onMarkClick={() => {
+                    setTasks(tasks.map((t) => (t.id === task.id ? { ...t, checked: !t.checked } : t)));
+                  }}
                 />
               ))}
           </div>
-          <div class="group fixed right-[22rem] bottom-4 hidden flex-row items-center justify-start space-x-3 overflow-x-hidden py-2 md:flex">
+          <div class="group fixed right-1 bottom-16 flex flex-row items-center justify-start space-x-3 overflow-x-hidden py-2 md:right-[22rem] md:bottom-4">
             <div
               class="flex aspect-square h-20 cursor-pointer items-center justify-center rounded-full bg-[rgb(251,194,199,0.53)] text-9xl text-white shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] transition-all duration-300 ease-out group-hover:ml-[12rem] hover:bg-[rgb(251,194,199,0.7)]"
               onClick={() => {
@@ -317,7 +322,7 @@ const ProfileTasks: FunctionComponent = () => {
             >
               <PlusIcon />
             </div>
-            <div class="absolute left-0 my-auto flex flex-row space-x-3 opacity-0 transition-opacity duration-100 group-hover:opacity-100">
+            <div class="absolute left-0 my-auto hidden flex-row space-x-3 opacity-0 transition-opacity duration-100 group-hover:opacity-100 md:flex">
               <div class="pointer-events-none flex aspect-square h-20 cursor-pointer flex-col items-center justify-center rounded-full bg-[rgba(206,232,251,0.7)] text-xl text-gray-600 shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] group-hover:pointer-events-auto hover:bg-[rgba(206,232,251,0.9)]">
                 <MagnifyingGlassIcon class="size-12" />
               </div>