Добавлено избранное в отдельный фрагмент

src/components/Section.vue

@@ -2,7 +2,7 @@
 <template>
   <div class="w-full sm:w-4/5 dark:text-neutral-300">
     <div class="bg-white flex justify-between p-3 lg:p-5 dark:bg-gray-800">
-      <div class="flex flex-col lg:flex-row">
+      <div class="flex flex-col md:flex-row">
         <div class="relative">
           <img
             v-if="isDarkMode"
@@ -22,13 +22,13 @@
           />
         </div>
         <select
-          class="dark:bg-gray-900 border-slate-100 shadow rounded-xl h-12 p-3 mt-3 lg:mt-0 lg:ml-4 "
+          @change="onfilterItems($event.target.value)"
+          class="dark:bg-gray-900 border-slate-100 shadow rounded-xl h-12 p-3 mt-3 md:mt-0 md:ml-4"
         >
           <option value="all">Все</option>
+          <option value="time">По времени</option>
           <option value="viewed">Просмотренные</option>
-          <option value="not_viewed">Непросмотренные</option>
-          <option value="status_true">Статус: True</option>
-          <option value="status_false">Статус: False</option>
+          <option value="status">Избранные</option>
         </select>
       </div>
       <Time />
@@ -54,9 +54,10 @@
 </template>
 
 <script setup>
-import { ref, onMounted, onBeforeUnmount } from "vue";
+import { ref, onMounted, watch } from "vue";
 import Stat from "./Stat.vue";
 import Time from "./Time.vue";
+import axios from "axios";
 
 const isDarkMode = ref(document.documentElement.classList.contains("dark"));
 // Следим за изменениями класса dark на html
@@ -71,9 +72,41 @@ onMounted(() => {
     attributes: true,
     attributeFilter: ["class"],
   });
+
+  // Загружаем данные при монтировании
+  loadItems(props.filter);
 });
 
-defineProps({
-  items: Array,
+// Состояния страницы и данные для входа
+const items = ref([]);
+// const filter = ref();
+const time = ref("");
+
+// Универсальная функция для получения данных
+const fetchData = async (url, targetRef) => {
+  try {
+    const { data } = await axios.get(url);
+    targetRef.value = data;
+  } catch (err) {
+    console.error(`Ошибка при получении данных с ${url}:`, err);
+  }
+};
+
+const onfilterItems = (filterValue) => {
+  console.log(filterValue);
+  loadItems(filterValue);
+};
+
+// Обертки для вызова
+const loadItems = (filterValue) => {
+  fetchData(`http://127.0.0.1:8002/records_all?item=${filterValue}`, items);
+};
+//watch(items, loadItems(filter.value));
+
+const props = defineProps({
+  filter: {
+    type: String,
+    default: "all",
+  },
 });
 </script>