Flesh out calendar event cards

src/lib/components/DateTimeInput.svelte

@@ -20,17 +20,21 @@
   }
 </script>
 
-<label class="relative">
-  <DateInput format="yyyy-MM-dd HH:mm" placeholder="" bind:value />
+<Button class="relative" on:click={init}>
+  <DateInput
+    format="yyyy-MM-dd HH:mm"
+    timePrecision="minute"
+    placeholder=""
+    bind:value />
   <div class="absolute top-0 h-12 right-2 flex gap-2 items-center cursor-pointer">
     {#if value}
       <Button on:click={clear} class="h-5">
         <Icon icon="close-circle" />
       </Button>
     {:else}
-      <Button on:click={init} class="h-5">
+      <Button class="h-5">
         <Icon icon="calendar-minimalistic" />
       </Button>
     {/if}
   </div>
-</label>
+</Button>

src/lib/components/Divider.svelte

@@ -0,0 +1,5 @@
+<div class="flex items-center gap-2 p-2 text-xs opacity-50">
+  <div class="h-px flex-grow bg-base-content opacity-25" />
+  <p><slot /></p>
+  <div class="h-px flex-grow bg-base-content opacity-25" />
+</div>

src/lib/components/Icon.svelte

@@ -26,6 +26,7 @@
   import ChatRound from "@assets/icons/Chat Round.svg?dataurl"
   import CheckCircle from "@assets/icons/Check Circle.svg?dataurl"
   import ClipboardText from "@assets/icons/Clipboard Text.svg?dataurl"
+  import ClockCircle from "@assets/icons/Clock Circle.svg?dataurl"
   import CloseCircle from "@assets/icons/Close Circle.svg?dataurl"
   import Copy from "@assets/icons/Copy.svg?dataurl"
   import Compass from "@assets/icons/Compass.svg?dataurl"
@@ -90,6 +91,7 @@
     "chat-round": ChatRound,
     "check-circle": CheckCircle,
     "clipboard-text": ClipboardText,
+    "clock-circle": ClockCircle,
     "close-circle": CloseCircle,
     copy: Copy,
     compass: Compass,