feat: add Categories

spa/src/components/BottomDrawer.vue

@@ -18,7 +18,6 @@
 
 <script setup>
 import {computed} from "vue";
-import { XMarkIcon } from '@heroicons/vue/24/outline';
 
 const props = defineProps({
   modelValue: Boolean,

spa/src/components/CategoriesInline.vue

@@ -0,0 +1,28 @@
+<template>
+<div class="flex items-center justify-center p-5 gap-2 flex-wrap">
+  <RouterLink class="btn" to="/categories">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z" />
+    </svg>
+    Каталог
+  </RouterLink>
+
+  <RouterLink v-for="category in categories" class="btn" :to="`/category/${category.id}`">
+    {{ category.name }}
+  </RouterLink>
+</div>
+</template>
+
+<script setup>
+import {onMounted, ref} from "vue";
+import ftch from "../utils/ftch.js";
+
+const categories = ref([]);
+
+onMounted(async () => {
+  const {data} = await ftch('categoriesList', {
+    perPage: 7,
+  });
+  categories.value = data;
+});
+</script>

spa/src/components/NoProducts.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="flex flex-col items-center justify-center text-center py-16 text-gray-500">
+    <span class="text-5xl mb-4">🛒</span>
+    <h2 class="text-xl font-semibold mb-2">Здесь пока пусто</h2>
+    <p class="text-sm mb-4">Мы уже выехали на склад, чтобы найти что-нибудь подходящее.</p>
+    <button class="btn btn-primary" @click="goBack">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
+      </svg>
+      Назад
+    </button>
+  </div>
+</template>
+
+<script setup>
+import { useRouter } from 'vue-router';
+const router = useRouter();
+const goBack = () => router.back();
+</script>