From 1fb0498c814ead15fd937fdbba7c990a7ad7a9c4 Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Wed, 12 Oct 2022 14:32:07 +0300
Subject: [PATCH] =?UTF-8?q?=D0=A1=D0=B4=D0=B5=D0=BB=D0=B0=D0=BB=D0=B0=20?=
 =?UTF-8?q?=D0=BA=D0=BD=D0=BE=D0=BF=D0=BA=D0=B8=20=D0=B8=20=D1=82=D0=B5?=
 =?UTF-8?q?=D0=BA=D1=81=D1=82=20=D0=B2=20CalendarHeader?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/sass/variables.sass                | 15 ++++---
 .../base/buttons/BaseArrowButton.vue          | 24 ++++++++++
 src/pages/calendar/TheCalendar.vue            |  4 +-
 .../calendar/components/CalendarHeader.vue    | 44 +++++++++++++++++++
 4 files changed, 79 insertions(+), 8 deletions(-)
 create mode 100644 src/components/base/buttons/BaseArrowButton.vue
 create mode 100644 src/pages/calendar/components/CalendarHeader.vue

diff --git a/src/assets/sass/variables.sass b/src/assets/sass/variables.sass
index a2f56a6..8af2d15 100644
--- a/src/assets/sass/variables.sass
+++ b/src/assets/sass/variables.sass
@@ -1,10 +1,11 @@
 \:root
-  --bg-lavender-color: #E9E9F6
-  --bg-white-color: #F8F8FF
-  --bg-ligth-blue-color: #E6EAFC
+  --bg-lavender-color: #e9e9f6
+  --bg-white-color: #f8f8ff
+  --bg-ligth-blue-color: #e6eafc
   --font-dark-blue-color: #252850
-  --font-black-color: #090A15
-  --btn-blue-color: #4772F2
-  --font-grey-color: #9294A7
-  --border-light-grey-color: #9294A7
+  --font-black-color: #090a15
+  --btn-blue-color: #4772f2
+  --btn-light-blue-color: #c6d2f6
+  --font-grey-color: #9294a7
+  --border-light-grey-color: #d3d4dc
   --default-shadow: 4px 4px 8px rgba(9, 10, 21, 0.1), -4px -4px 8px rgba(9, 10, 21, 0.1)
diff --git a/src/components/base/buttons/BaseArrowButton.vue b/src/components/base/buttons/BaseArrowButton.vue
new file mode 100644
index 0000000..20da299
--- /dev/null
+++ b/src/components/base/buttons/BaseArrowButton.vue
@@ -0,0 +1,24 @@
+<template lang="pug">
+  button.arrow-button.flex.items-center.icon-down-arrow.px-2.pt-px
+</template>
+
+<script>
+export default {
+  name: "ArrowButton",
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style lang="sass">
+.arrow-button
+  width: 32px
+  height: 32px
+  background: var(--btn-light-blue-color)
+  color: var(--btn-blue-color)
+  border-radius: 50%
+  font-size: 16px
+  &:hover
+    background: #a0b4f0
+</style>
diff --git a/src/pages/calendar/TheCalendar.vue b/src/pages/calendar/TheCalendar.vue
index 99ae760..cb02df7 100644
--- a/src/pages/calendar/TheCalendar.vue
+++ b/src/pages/calendar/TheCalendar.vue
@@ -1,8 +1,10 @@
 <template lang="pug">
+  calendar-header
 </template>
-
 <script>
+import CalendarHeader from "./components/CalendarHeader.vue";
 export default {
   name: "TheCalendar",
+  components: { CalendarHeader },
 };
 </script>
diff --git a/src/pages/calendar/components/CalendarHeader.vue b/src/pages/calendar/components/CalendarHeader.vue
new file mode 100644
index 0000000..01a07a8
--- /dev/null
+++ b/src/pages/calendar/components/CalendarHeader.vue
@@ -0,0 +1,44 @@
+<template lang="pug">
+  .calendar-header-wrapper.flex.items-center.justify-between.ml-2.py-3.pl-5.pr-6
+    .right-side.flex
+      base-arrow-button.left-arrow.mr-4
+      base-arrow-button.right-arrow.mr-6
+      .text.flex.items-center
+        span.font-medium.text-base 24 Мая 2022 
+          span.today.font-bold.text-xxs(v-if="isToday") Сегодня
+</template>
+
+<script>
+import BaseArrowButton from "@/components/base/buttons/BaseArrowButton.vue";
+export default {
+  name: "CalendarHeader",
+  components: { BaseArrowButton },
+  data() {
+    return {
+      isToday: true,
+    };
+  },
+  computed: {},
+};
+</script>
+
+<style lang="sass">
+.calendar-header-wrapper
+  width: 100%
+  background-color: var(--bg-white-color)
+  height: 56px
+  border-radius: 4px
+
+.right-side
+
+.left-arrow
+  transform: rotate(90deg)
+.right-arrow
+  transform: rotate(270deg)
+
+.text
+  color: var(--font-dark-blue-color)
+
+.today
+  opacity: 0.5
+</style>