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>

spa/src/components/BottomDrawer.vue

@@ -0,0 +1,57 @@
+<template>
+  <transition name="fade">
+    <div
+        v-if="visible"
+        class="fixed inset-0 bg-black/50 z-40"
+        @click.self="close"
+    >
+      <transition name="slide-up">
+        <div
+            class="fixed bottom-0 left-0 w-full h-[80vh] bg-white rounded-t-2xl shadow-xl z-50 p-4"
+        >
+          <slot />
+        </div>
+      </transition>
+    </div>
+  </transition>
+</template>
+
+<script setup>
+import {computed} from "vue";
+import { XMarkIcon } from '@heroicons/vue/24/outline';
+
+const props = defineProps({
+  modelValue: Boolean,
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+})
+
+function close() {
+  visible.value = false
+}
+</script>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.slide-up-enter-active,
+.slide-up-leave-active {
+  transition: transform 0.25s ease;
+}
+.slide-up-enter-from,
+.slide-up-leave-to {
+  transform: translateY(100%);
+}
+</style>

spa/src/components/ProductCard.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="bg-white rounded-lg shadow p-3">
+    <img src="https://placehold.co/300x300" alt="Футболка" class="w-full h-auto rounded-md mb-2" />
+    <h2 class="font-semibold text-base">Базовая футболка</h2>
+    <p class="text-sm text-gray-500">RUB 6,000</p>
+  </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style scoped>
+
+</style>

spa/src/main.js

@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import './style.css'
+
+createApp(App).mount('#app')

spa/src/style.css

@@ -0,0 +1,2 @@
+@import "tailwindcss";
+@plugin "daisyui";