add style and font family

src/components/ResponsiveTimeUntil.vue

@@ -1,9 +1,17 @@
 <script setup lang="ts">
-import { onUnmounted, ref } from "vue"
+import { computed, onUnmounted, ref } from "vue"
 import { timeUntil } from "../services/time-until"
 
 const props = defineProps<{ project?: string; target?: string }>()
 
+const targetDate = computed(() =>
+  props.target
+    ? new Date(props.target).toLocaleDateString(undefined, {
+        dateStyle: "long",
+      })
+    : null
+)
+
 const timeUntilTarget = props.target ? timeUntil(props.target) : null
 
 const yearsUntil = ref(timeUntilTarget?.years ?? 0)
@@ -13,8 +21,28 @@ const hoursUntil = ref(timeUntilTarget?.hours ?? 0)
 const minutesUntil = ref(timeUntilTarget?.minutes ?? 0)
 const secondsUntil = ref(timeUntilTarget?.seconds ?? 0)
 
+const isYearsDisplayed = computed(() => yearsUntil.value > 0)
+const isMonthsDisplayed = computed(
+  () => isYearsDisplayed.value || monthsUntil.value > 0
+)
+const isDaysDisplayed = computed(
+  () => isMonthsDisplayed.value || daysUntil.value > 0
+)
+const isHoursDisplayed = computed(
+  () => isDaysDisplayed.value || hoursUntil.value > 0
+)
+const isMinutesDisplayed = computed(
+  () => isHoursDisplayed.value || minutesUntil.value > 0
+)
+const isSecondsDisplayed = computed(
+  () => isMinutesDisplayed.value || secondsUntil.value > 0
+)
+
 const id = setInterval(() => {
-  const timeUntilTarget = timeUntil("2024-03-13T09:00:00.000Z")
+  if (!props.target) {
+    return
+  }
+  const timeUntilTarget = timeUntil(props.target)
 
   yearsUntil.value = timeUntilTarget.years
   monthsUntil.value = timeUntilTarget.months
@@ -28,20 +56,61 @@ onUnmounted(() => clearInterval(id))
 </script>
 
 <template>
-  <h1 v-if="props.project">{{ props.project }}</h1>
-  <section v-if="timeUntilTarget">
-    <div v-if="yearsUntil > 0" class="count">{{ yearsUntil }} years</div>
-    <div v-if="monthsUntil > 0" class="count">{{ monthsUntil }} months</div>
-    <div v-if="daysUntil > 0" class="count">{{ daysUntil }} days</div>
-    <div v-if="hoursUntil > 0" class="count">{{ hoursUntil }} hours</div>
-    <div v-if="minutesUntil > 0" class="count">{{ minutesUntil }} minutes</div>
-    <div v-if="secondsUntil > 0" class="count">{{ secondsUntil }} seconds</div>
-  </section>
-  <section v-else>No target</section>
+  <div class="responsive-time-until">
+    <h1 v-if="props.project">{{ props.project }}</h1>
+    <section class="time" v-if="timeUntilTarget">
+      <div v-if="isYearsDisplayed" class="count">
+        <span class="number">{{ yearsUntil }}</span>
+        <span class="moment">years</span>
+      </div>
+      <div v-if="isMonthsDisplayed" class="count">
+        <span class="number">{{ monthsUntil }}</span>
+        <span class="moment">months</span>
+      </div>
+      <div v-if="isDaysDisplayed" class="count">
+        <span class="number">{{ daysUntil }}</span>
+        <span class="moment">days</span>
+      </div>
+      <div v-if="isHoursDisplayed" class="count">
+        <span class="number">{{ hoursUntil }}</span>
+        <span class="moment">hours</span>
+      </div>
+      <div v-if="isMinutesDisplayed" class="count">
+        <span class="number">{{ minutesUntil }}</span>
+        <span class="moment">minutes</span>
+      </div>
+      <div v-if="isSecondsDisplayed" class="count">
+        <span class="number">{{ secondsUntil }}</span>
+        <span class="moment">seconds</span>
+      </div>
+    </section>
+    <section v-else>No target</section>
+    <section v-if="targetDate" class="target-date">{{ targetDate }}</section>
+  </div>
 </template>
 
 <style scoped>
-section {
+div.responsive-time-until {
   display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100vh;
+  width: 100vw;
+}
+.time {
+  display: flex;
+  justify-content: center;
+  gap: 1rem;
+}
+.count {
+  display: flex;
+  flex-direction: column;
+}
+.number {
+  font-size: 36px;
+}
+.target-date {
+  margin-bottom: 1rem;
 }
 </style>