feat: calendar circle colors

src/pages/profile_calendar.tsx

@@ -296,12 +296,29 @@ const ProfileCalendar: FunctionComponent = () => {
   }, [tags]);
 
   const tasksCount = (date: CalendarDateTemplateEvent) => {
-    return tasks.filter((task) => {
+    const filterTasks = tasks.filter((task) => {
       const taskDate = task.date;
       return (
         taskDate.getDate() === date.day && taskDate.getMonth() === date.month && taskDate.getFullYear() === date.year
       );
-    }).length;
+    });
+    return {
+      length: filterTasks.length,
+      colors: filterTasks.map((task) => {
+        switch (task.priority) {
+          case 1:
+            return "bg-[rgba(18,26,230,1)]";
+          case 2:
+            return "bg-[rgba(97,200,232,1)]";
+          case 3:
+            return "bg-[rgba(247,220,52,1)]";
+          case 4:
+            return "bg-[rgba(251,194,199,1)]";
+          default:
+            return "bg-[rgba(251,194,199,1)]";
+        }
+      }),
+    };
   };
 
   const hasTasksOnDate = (date: CalendarDateTemplateEvent) => {
@@ -315,7 +332,8 @@ const ProfileCalendar: FunctionComponent = () => {
 
   const dateTemplate = (date: CalendarDateTemplateEvent) => {
     const isHighlighted = hasTasksOnDate(date);
-    const countT = tasksCount(date);
+    const taskInfo = tasksCount(date);
+    if (taskInfo.length) console.log(taskInfo);
     const isSelected =
       currentDate &&
       currentDate.getDate() === date.day &&
@@ -339,10 +357,10 @@ const ProfileCalendar: FunctionComponent = () => {
         <span>{date.day}</span>
         {isHighlighted && (
           <div class="absolute top-2 right-2 flex h-fit w-2 flex-col items-center gap-1 md:h-2 md:w-fit md:flex-row">
-            {Array.from({ length: countT > 3 ? 3 : countT }).map((_, i) => (
+            {Array.from({ length: taskInfo.length > 3 ? 3 : taskInfo.length }).map((_, i) => (
-              <span key={i} className="size-2 rounded-full bg-pink-400" />
+              <span key={i} className={cn("size-2 rounded-full", taskInfo.colors[i])} />
             ))}
-            {countT > 3 && <span className="text-xs font-bold text-pink-400 select-none">+</span>}
+            {taskInfo.length > 3 && <span className="text-xs font-bold text-pink-400 select-none">+</span>}
           </div>
         )}
       </div>