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;