add progress bar and countdown

src/lib/components/Countdown.svelte

@@ -0,0 +1,23 @@
+<script type="ts">
+    import { formatDuration, intervalToDuration } from 'date-fns';
+    import { onMount } from 'svelte';
+
+    let now = new Date();
+    onMount(() => {
+        let x = setInterval(() => {
+            now = new Date();
+        }, 100);
+        return () => {
+            clearInterval(x);
+        };
+    });
+    export let destDate: Date;
+    $: message = formatDuration(
+        intervalToDuration({
+            start: now,
+            end: destDate,
+        })
+    );
+</script>
+
+<div>{message}</div>

src/lib/components/DateBar.svelte

@@ -0,0 +1,37 @@
+<script type="ts">
+    import { onMount } from 'svelte';
+    import { tweened } from 'svelte/motion';
+
+    function mapBetween(currentNum: number, min: number, max: number): number {
+        let minAllowed = 0;
+        let maxAllowed = 100;
+        return (
+            ((maxAllowed - minAllowed) * (currentNum - min)) / (max - min) +
+            minAllowed
+        );
+    }
+    export let destDate: Date;
+    export let startDate: Date;
+    let progress = tweened(0, { duration: 100 });
+    let now = new Date();
+    onMount(() => {
+        let x = setInterval(() => {
+            now = new Date();
+        }, 100);
+        return () => {
+            clearInterval(x);
+        };
+    });
+    $: progress.set(
+        mapBetween(now.getTime(), startDate.getTime(), destDate.getTime())
+    );
+</script>
+
+<div>
+    <span>{$progress.toFixed(2)}%</span>
+    <progress
+        class="progress progress-success w-1/2"
+        value={$progress}
+        max={100}
+    />
+</div>

src/lib/components/ScheduleRow.svelte

@@ -1,16 +1,18 @@
 <script type="ts">
     import type { DisplayCL } from '$types';
     import autoAnimate from '@formkit/auto-animate';
-    import { endOfDecade, format, isAfter, parse } from 'date-fns';
+    import { format, isAfter, parse } from 'date-fns';
     import { onMount } from 'svelte';
     import { slide } from 'svelte/transition';
     import Fa from 'svelte-fa';
+    import Countdown from './Countdown.svelte';
     import {
         faCircle,
         faMinus,
         faPlus,
         faSun,
     } from '@fortawesome/free-solid-svg-icons';
+    import DateBar from './DateBar.svelte';
     let hide = true;
     export let displayDate: Date;
     export let cls: DisplayCL;
@@ -55,17 +57,23 @@
         <div class="px-2" />
     </div>
     {#if !hide}
-        <div transition:slide|local class="bottom block">
-            {#if isNow}
-                <!-- During class -->
-                {cls.name} ends in 420 minutes, 69000 seconds
-            {:else if isAfter(currentDate, endTime)}
-                <!-- After Class -->
-                Class Ended
-            {:else}
-                <!-- Before Class -->
-                {cls.name} begins in 420 minutes, 69000 seconds
-            {/if}
+        <div transition:slide|local class="bottom flex flex-col">
+            <div>Details about class, grades, and other stuff here</div>
+            <div>
+                {#if isAfter(currentDate, endTime)}
+                    Class Ended
+                {:else}
+                    {cls.name}
+                    {isNow ? 'ends' : 'begins'} in <Countdown
+                        destDate={isNow ? endTime : startTime}
+                    />
+                {/if}
+            </div>
+            <div>
+                {#if isNow}
+                    <DateBar startDate={startTime} destDate={endTime} />
+                {/if}
+            </div>
         </div>
     {/if}
 </div>