first commit

spa/src/App.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="relative flex justify-center items-center p-3">
+    <h1 class="text-gray-950 text-lg font-bold truncate">Демо Телеграм-магазин</h1>
+  </div>
+
+  <div class="p-3">
+    <button
+        class="btn"
+        @click="drawerVisible = true"
+    >
+      Категории
+      <ChevronDownIcon class="w-5"/>
+    </button>
+  </div>
+
+  <div class="grid grid-cols-1 gap-4 p-3 sm:grid-cols-2 md:grid-cols-3">
+    <ProductCard/>
+    <ProductCard/>
+    <ProductCard/>
+    <ProductCard/>
+    <ProductCard/>
+  </div>
+
+  <BottomDrawer v-model="drawerVisible">
+    <ul class="list bg-base-100 rounded-box shadow-md">
+
+      <li class="p-4 pb-2 text-xs opacity-60 tracking-wide">Категории</li>
+
+      <li class="list-row">
+        <div><img class="size-10 rounded-box" src="https://img.daisyui.com/images/profile/demo/1@94.webp"/></div>
+        <div class="flex items-center">Dio Lupa</div>
+      </li>
+
+      <li class="list-row">
+        <div><img class="size-10 rounded-box" src="https://img.daisyui.com/images/profile/demo/1@94.webp"/></div>
+        <div class="flex items-center">Dio Lupa</div>
+      </li>
+      <li class="list-row">
+        <div><img class="size-10 rounded-box" src="https://img.daisyui.com/images/profile/demo/1@94.webp"/></div>
+        <div class="flex items-center">Dio Lupa</div>
+      </li>
+      <li class="list-row">
+        <div><img class="size-10 rounded-box" src="https://img.daisyui.com/images/profile/demo/1@94.webp"/></div>
+        <div class="flex items-center">Dio Lupa</div>
+      </li>
+
+    </ul>
+  </BottomDrawer>
+</template>
+
+<script setup>
+import ProductCard from "./components/ProductCard.vue";
+import { ChevronDownIcon } from '@heroicons/vue/24/outline';
+import BottomDrawer from "./components/BottomDrawer.vue";
+import {ref} from "vue";
+
+const drawerVisible = ref(false);
+
+</script>
+
+<style scoped>
+
+</style>