🎨 Make date selector modular

src/components/date-selector.vue

@@ -1,5 +1,6 @@
 <script setup>
-import { selectedDate, selectedDay, changeDay, changeDate } from "@/store";
+defineProps(["selectedDate", "selectedDay"]);
+defineEmits(["changeDay", "changeDate"]);
 import { ArrowLeftIcon, ArrowRightIcon } from "lucide-vue-next";
 import dayjs from "dayjs";
 import { getDateSkippingWeekend } from "@/util";
@@ -17,15 +18,19 @@ const dayNames = [
 
 <template>
   <div class="selector">
-    <ArrowLeftIcon @click="changeDay--" />
+    <ArrowLeftIcon @click="$emit('changeDay', -1)" />
     <span
       class="day"
-      @click="changeDate = getDateSkippingWeekend(dayjs().toDate(), true)"
+      @click="
+        $emit('changeDate', getDateSkippingWeekend(dayjs().toDate(), true))
+      "
     >
-      {{ $t(dayNames[selectedDay + 1]) }},
-      {{ dayjs(selectedDate).format("DD.MM.YYYY") }}
+      {{ $t(dayNames[selectedDay + 1])
+      }}{{
+        selectedDate ? ", " + dayjs(selectedDate).format("DD.MM.YYYY") : ""
+      }}
     </span>
-    <ArrowRightIcon @click="changeDay++" />
+    <ArrowRightIcon @click="$emit('changeDay', +1)" />
   </div>
 </template>