created

src/components/PeriodSelector.vue

@@ -0,0 +1,62 @@
+<script setup>
+import { ref } from 'vue'
+
+const emit = defineEmits(['days'])
+
+// Изначально выбрано 7 дней
+const selectedDays = ref(7)
+
+function selectDays(number) {
+  selectedDays.value = number
+  emit('days', number)
+}
+</script>
+
+<template>
+  <div class="days-selector">
+    <n-button
+      :type="selectedDays === 7 ? 'primary' : 'default'"
+      @click="selectDays(7)"
+    >
+      7 days
+    </n-button>
+    <n-button
+      :type="selectedDays === 14 ? 'primary' : 'default'"
+      @click="selectDays(14)"
+    >
+      14 days
+    </n-button>
+    <n-button
+      :type="selectedDays === 30 ? 'primary' : 'default'"
+      @click="selectDays(30)"
+    >
+      1 month
+    </n-button>
+    <n-button
+      :type="selectedDays === 180 ? 'primary' : 'default'"
+      @click="selectDays(180)"
+    >
+      half year
+    </n-button>
+    <n-button
+      :type="selectedDays === 365 ? 'primary' : 'default'"
+      @click="selectDays(365)"
+    >
+      1 year
+    </n-button>
+  </div>
+</template>
+
+<style scoped>
+.days-selector {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  justify-content: center;
+}
+
+.days-selector > .n-button {
+  flex: 1 1 100px;
+  min-width: 100px;
+}
+</style>