added time

nginx/vue/src/components/quick/Time.vue

@@ -0,0 +1,27 @@
+<script setup>
+// Get the current date and time, make time reactive
+// Get the month name, weekday name and time should be hh:mm:ss
+import { ref } from "vue";
+
+const date = new Date();
+const day = date.getDate();
+const time = ref(
+    date.toLocaleTimeString("en-GB", { hour: "2-digit", minute: "2-digit" }),
+);
+const weekday = date.toLocaleDateString("en-GB", { weekday: "long" });
+const month = date.toLocaleDateString("en-GB", { month: "long" });
+
+setInterval(() => {
+    time.value = date.toLocaleTimeString("en-GB", {
+        hour: "2-digit",
+        minute: "2-digit",
+    });
+}, 1000);
+</script>
+
+<template>
+    <div class="flex-col">
+        <h4>{{ time }}</h4>
+        <h4>{{ weekday }} {{ day }}, {{ month }}</h4>
+    </div>
+</template>

nginx/vue/src/views/Home.vue

@@ -1,5 +1,6 @@
 <script setup>
 import Timer from "@/components/quick/Timer.vue";
+import Time from "@/components/quick/Time.vue";
 
 import Intro from "@/components/home/Intro.vue";
 import Stamps from "@/components/home/Stamps.vue";
@@ -15,7 +16,10 @@ import Watching from "@/components/home/Watching.vue";
 <template>
     <div class="overlay">
         <img src="/img/memes/fire-woman.gif" class="br w-10vw" />
-        <Timer class="tr bdr-2 bg-primary" />
+        <div class="flex-col tr">
+            <Time class="bdr-2 bg-primary" />
+            <Timer class="bdr-2 bg-primary" />
+        </div>
     </div>
     <div class="background halftone" />