feat: ✨ implement calendar

icssc · Feb 12, 2024 · d23b92c · d23b92c
1 parent aa3a3e6
commit d23b92c
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 32 deletions.
diff --git a/src/lib/components/CalendarV2/Calendar.svelte b/src/lib/components/CalendarV2/Calendar.svelte
@@ -40,33 +40,38 @@
   };
 </script>
 
-<p class="h3 hidden text-center">{monthName} {currentYear}</p>
-
 <div
   class="flex items-center justify-between rounded-xl border bg-gradient-to-l from-[#00A96E0D] to-[#377CFB0D] p-5"
 >
   <button on:click={decrementMonth} class="p-3 pl-1">
     <span class="text-3xl text-gray-500">&lsaquo;</span>
   </button>
 
-  <table class="w-full table-fixed p-3">
-    <thead>
-      <tr>
-        {#each WEEKDAYS as dayOfWeek}
-          <th class="px-0">
-            <div>
-              <p class="w-full text-center text-sm font-bold uppercase text-slate-medium">
-                {dayOfWeek}
-              </p>
-            </div>
-            <div class="divider mt-0" />
-          </th>
-        {/each}
-      </tr>
-    </thead>
+  <div>
+    <div class="flex flex-col pb-6">
+      <p class="h3 text-left font-montserrat text-3xl font-semibold">{monthName} {currentYear}</p>
+      <div class="divider m-0 h-[2px] w-16 bg-accent" />
+    </div>
+
+    <table class="w-full table-fixed p-3">
+      <thead>
+        <tr>
+          {#each WEEKDAYS as dayOfWeek}
+            <th class="px-0">
+              <div>
+                <p class="w-full text-center text-sm font-bold uppercase text-slate-medium">
+                  {dayOfWeek}
+                </p>
+              </div>
+              <div class="divider mt-0" />
+            </th>
+          {/each}
+        </tr>
+      </thead>
 
-    <CalendarBody {calendarDays} {updateCalendar} {currentMonth} />
-  </table>
+      <CalendarBody {calendarDays} {updateCalendar} {currentMonth} />
+    </table>
+  </div>
 
   <button on:click={incrementMonth} class="p-3 pr-1">
     <span class="text-3xl text-gray-500">&rsaquo;</span>

diff --git a/src/lib/components/CalendarV2/CalendarBody.svelte b/src/lib/components/CalendarV2/CalendarBody.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-  import CalendarBodyDay from "$lib/components/meetingSetup/Calendar/CalendarBodyDay.svelte";
+  import CalendarBodyDay from "./CalendarBodyDay.svelte";
+
   import { updateSelectedRange } from "$lib/stores/meetingSetupStores";
   import { ZotDate } from "$lib/utils/ZotDate";
 
@@ -64,6 +65,7 @@
               startDaySelection &&
               endDaySelection &&
               calendarDay.determineDayWithinBounds(startDaySelection, endDaySelection)}
+
             <button
               on:touchstart={(e) => {
                 if (e.cancelable) {
@@ -90,7 +92,7 @@
                 handleEndSelection();
               }}
               tabindex="0"
-              class="relative flex w-full cursor-pointer select-none justify-center py-4"
+              class="relative flex w-full cursor-pointer select-none justify-center py-2"
             >
               <CalendarBodyDay {isHighlighted} {calendarDay} />
             </button>

diff --git a/src/lib/components/CalendarV2/CalendarBodyDay.svelte b/src/lib/components/CalendarV2/CalendarBodyDay.svelte
@@ -1,22 +1,18 @@
 <script lang="ts">
   import type { ZotDate } from "$lib/utils/ZotDate";
+  import { cn } from "$lib/utils/utils";
 
   export let isHighlighted: boolean | null;
   export let calendarDay: ZotDate;
 </script>
 
-{#if isHighlighted}
-  <div
-    class="bg-primary-200 absolute left-1/2 top-1/2 h-10 w-10 -translate-x-1/2 -translate-y-1/2 rounded-full"
-  ></div>
-{:else if calendarDay.isSelected}
-  <div
-    class="absolute left-1/2 top-1/2 h-10 w-10 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary"
-  />
-{/if}
-
 <p
-  class="relative p-2 text-base font-medium text-gray-500"
+  class={cn(
+    "flex-center relative aspect-square h-12 w-12 text-xl font-medium text-gray-dark",
+    calendarDay.isSelected &&
+      "rounded-xl bg-primary text-gray-light drop-shadow-[0_0px_16px_rgba(55,124,251,0.6)]",
+    isHighlighted && "rounded-xl bg-slate-base text-gray-dark",
+  )}
   data-day={calendarDay.getDay()}
   data-month={calendarDay.getMonth()}
   data-year={calendarDay.getYear()}