✨ Switch to global date selector

src/components/date-selector.vue

@@ -0,0 +1,40 @@
+<script setup>
+import { selectedDate, selectedDay } from "../store";
+import { dayNames } from "../definitions";
+import dayjs from "dayjs";
+import ArrowIcon from "./icons/arrow-icon.vue";
+</script>
+
+<template>
+  <div class="selector">
+    <ArrowIcon
+      @click="selectedDate = dayjs(selectedDate).subtract(1, 'day').toDate()"
+    />
+    <span
+      class="day"
+      @click="selectedDate = new Date(new Date().setUTCHours(0, 0, 0, 0))"
+    >
+      {{ dayNames[selectedDay + 1] }},
+      {{ dayjs(selectedDate).format("DD.MM.YYYY") }}
+    </span>
+    <ArrowIcon
+      style="transform: rotate(180deg)"
+      @click="selectedDate = dayjs(selectedDate).add(1, 'day').toDate()"
+    />
+  </div>
+</template>
+
+<style scoped>
+.selector {
+  padding: 65px 10px 0px 10px;
+  display: grid;
+  grid-template-columns: 35px 1fr 35px;
+  align-items: center;
+  justify-items: center;
+}
+
+svg,
+span {
+  cursor: pointer;
+}
+</style>