[WIP] Разделил компоненты календаря

src/pages/oldCalendar/components/CalendarLayoutSwitch.vue

@@ -0,0 +1,52 @@
+<template lang="pug">
+  .layout-switch-wrapper.flex.h-10.p-1
+    button#day.flex.items-center.px-3.transition.duration-200.ease-linear(
+      :class="dayLayoutState",
+      @click="changeSelectedLayout"
+    ) День
+    button#week.flex.items-center.px-3.transition.duration-200.ease-linear(
+      :class="weekLayoutState",
+      @click="changeSelectedLayout"
+    ) Неделя
+</template>
+
+<script>
+export default {
+  name: "CalendarLayoutSwitch",
+  data() {
+    return {
+      selectedLayout: "day",
+    };
+  },
+  computed: {
+    dayLayoutState() {
+      return {
+        active: this.selectedLayout === "day",
+      };
+    },
+    weekLayoutState() {
+      return {
+        active: this.selectedLayout === "week",
+      };
+    },
+  },
+  methods: {
+    changeSelectedLayout(event) {
+      this.selectedLayout = event.target.id;
+      this.$emit("selected", event.target.id);
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.active
+  background-color: var(--bg-aqua-blue)
+  color: var(--default-white)
+  border-radius: 4px
+
+.layout-switch-wrapper
+  background-color: var(--bg-light-grey)
+  color: var(--font-grey-color)
+  border-radius: 4px
+</style>