From bc36a670a6b27a139763aec1c112c4ff13b66ec2 Mon Sep 17 00:00:00 2001
From: nquidox <nquidox@gmail.com>
Date: Thu, 25 Sep 2025 19:11:40 +0300
Subject: [PATCH] created

---
 src/components/PeriodSelector.vue | 62 +++++++++++++++++++++++++++++++
 1 file changed, 62 insertions(+)
 create mode 100644 src/components/PeriodSelector.vue

diff --git a/src/components/PeriodSelector.vue b/src/components/PeriodSelector.vue
new file mode 100644
index 0000000..2a14f41
--- /dev/null
+++ b/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>