1 files changed, 123 insertions, 0 deletions
diff --git a/src/components/_sila/Global/SilaComponents/DateSwitch.vue b/src/components/_sila/Global/SilaComponents/DateSwitch.vue
new file mode 100644
index 00000000..4df70ba4
--- /dev/null
+++ b/src/components/_sila/Global/SilaComponents/DateSwitch.vue
@@ -0,0 +1,123 @@
+<template>
+  <div class="fans-date-switch">
+    <span
+      class="medium-12px scale-item"
+      :class="{ 'switch-active': timeScale === 'hour' }"
+      @click="switchTimeScale('hour')"
+      >{{ $t('global.date.lastHour') }}</span
+    >
+    <span
+      class="medium-12px scale-item"
+      :class="{ 'switch-active': timeScale === 'day' }"
+      @click="switchTimeScale('day')"
+      >{{ $t('global.date.lastDay') }}</span
+    >
+    <span
+      class="medium-12px scale-item"
+      :class="{ 'switch-active': timeScale === 'week' }"
+      @click="switchTimeScale('week')"
+      >{{ $t('global.date.lastWeek') }}</span
+    >
+    <span
+      class="medium-12px scale-item"
+      :class="{ 'switch-active': timeScale === 'mounth' }"
+      @click="switchTimeScale('mounth')"
+      >{{ $t('global.date.lastMounth') }}</span
+    >
+    <span
+      class="medium-12px scale-item"
+      :class="{ 'switch-active': timeScale === 'year' }"
+      @click="switchTimeScale('year')"
+      >{{ $t('global.date.lastYear') }}</span
+    >
+    <div class="slider" />
+    <div class="date-picker">
+      <img src="@/assets/images/calendar-icon.svg" />
+      <span class="medium-12px scale-item">{{
+        $t('global.date.selectDate')
+      }}</span>
+    </div>
+    <img class="date-clear" src="@/assets/images/icon-clear-red.svg" />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    timeScale: {
+      type: String,
+      default: 'hour',
+    },
+    switchTimeScale: {
+      type: Function,
+      required: true,
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.fans-date-switch {
+  position: relative;
+
+  height: 48px;
+  padding: 0 16px 0 32px;
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  gap: 24px;
+  border-bottom: 1px solid $faint-secondary-primary-10;
+}
+
+.switch-active {
+  color: $red-brand-primary;
+  transition: ease-in 0.15s;
+}
+
+.slider {
+  position: absolute;
+  height: 0px;
+  border-bottom: 4px solid $red-brand-primary;
+  transition: ease-in 0.2s;
+  bottom: 0px;
+}
+
+.scale-item {
+  cursor: pointer;
+}
+
+.scale-item:nth-child(1).switch-active ~ .slider {
+  width: 92px;
+  left: 31px;
+}
+
+.scale-item:nth-child(2).switch-active ~ .slider {
+  left: 135px;
+  width: 105px;
+}
+
+.scale-item:nth-child(3).switch-active ~ .slider {
+  left: 255px;
+  width: 112px;
+}
+
+.scale-item:nth-child(4).switch-active ~ .slider {
+  left: 383px;
+  width: 107px;
+}
+
+.scale-item:nth-child(5).switch-active ~ .slider {
+  left: 508px;
+  width: 90px;
+}
+
+.date-picker {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+}
+
+.date-clear {
+  margin-left: auto;
+  cursor: pointer;
+}
+</style>