Skip to content

Commit 2588435

Browse files
hmbanan666hmbanan666
authored
feat: new sliders (#123)
1 parent 97bc41b commit 2588435

11 files changed

Lines changed: 183 additions & 33 deletions

File tree

‎apps/storefront-telegram/app/components/CategoryBlock.vue‎

Lines changed: 0 additions & 24 deletions
This file was deleted.

‎apps/storefront-telegram/app/components/CitySelector.vue‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,10 @@
55
:dismissible="false"
66
should-scale-background
77
:set-background-color-on-scale="false"
8+
:ui="{
9+
content: 'max-h-10/12 !mt-150',
10+
overlay: 'tg-content-safe-area-top',
11+
}"
812
>
913
<template #content>
1014
<div class="p-4 flex flex-col gap-3 overflow-y-auto">
@@ -19,6 +23,10 @@
1923
size="lg"
2024
:items="items"
2125
icon="i-lucide-map-pin"
26+
:ui="{
27+
item: 'items-center',
28+
label: '!text-lg',
29+
}"
2230
/>
2331
</div>
2432
</template>

‎apps/storefront-telegram/app/components/UserPointsCard.vue‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<template>
2+
<div class="aspect-3/2 bg-primary rounded-lg">
3+
<div class="w-full h-full p-4 flex flex-col justify-between tg-text-button">
4+
<div class="text-lg/5 font-semibold">
5+
{{ clientStore.fullName }}
6+
</div>
7+
<div class="text-3xl/5 font-bold">
8+
5%
9+
</div>
10+
</div>
11+
</div>
12+
</template>
13+
14+
<script setup lang="ts">
15+
const clientStore = useClientStore()
16+
</script>

‎apps/storefront-telegram/app/components/catalog/CategoriesSliderMenu.vue‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<template>
2+
<div class="z-40 sticky top-0 h-18 bg-primary">
3+
<div class="max-w-full overflow-x-scroll snap-x">
4+
<div class="w-max flex flex-row flex-wrap gap-5">
5+
<div
6+
v-for="category in menuStore.menu?.categories"
7+
:key="category.id"
8+
class="scroll-ml-6 snap-start"
9+
>
10+
<div class="p-0">
11+
{{ category.name }}
12+
</div>
13+
</div>
14+
</div>
15+
</div>
16+
</div>
17+
</template>
18+
19+
<script setup lang="ts">
20+
const menuStore = useMenuStore()
21+
</script>

‎apps/storefront-telegram/app/components/catalog/CategoryBlock.vue‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<template>
2+
<div class="flex flex-col gap-3 mb-10">
3+
<h2 class="text-2xl/5 font-semibold tracking-tight">
4+
{{ category?.name }}
5+
</h2>
6+
7+
<div class="grid grid-cols-2 gap-2 items-start justify-between">
8+
<ProductCard
9+
v-for="product in products"
10+
:key="product.id"
11+
:product-id="product.id"
12+
:category-id="categoryId"
13+
/>
14+
</div>
15+
</div>
16+
</template>
17+
18+
<script setup lang="ts">
19+
const { categoryId } = defineProps<{
20+
categoryId: string
21+
}>()
22+
23+
const menuStore = useMenuStore()
24+
const category = menuStore.menu?.categories.find((c) => c.id === categoryId)
25+
const products = category?.products.filter((p) => p.isAvailableForPurchase && p.variants.length)
26+
</script>

‎apps/storefront-telegram/app/components/catalog/RecommendedSlider.vue‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<template>
2+
<div class="flex flex-col gap-2">
3+
<h2 class="text-xl/5 font-semibold tracking-tight">
4+
Рекомендуем
5+
</h2>
6+
7+
<div class="max-w-full overflow-x-scroll snap-x">
8+
<div class="w-max flex flex-row flex-wrap gap-2">
9+
<div class="min-w-24 scroll-ml-6 snap-start border border-primary aspect-3/4 rounded-lg">
10+
<div class="p-2 max-w-24">
11+
1 товар
12+
</div>
13+
</div>
14+
15+
<div class="min-w-24 scroll-ml-6 snap-start border border-primary aspect-3/4 rounded-lg">
16+
<div class="p-2 max-w-24">
17+
2 товар
18+
</div>
19+
</div>
20+
21+
<div class="min-w-24 scroll-ml-6 snap-start border border-primary aspect-3/4 rounded-lg">
22+
<div class="p-2 max-w-24">
23+
3 товар
24+
</div>
25+
</div>
26+
27+
<div class="min-w-24 scroll-ml-6 snap-start border border-primary aspect-3/4 rounded-lg">
28+
<div class="p-2 max-w-24">
29+
4 товар
30+
</div>
31+
</div>
32+
33+
<div class="min-w-24 scroll-ml-6 snap-start border border-primary aspect-3/4 rounded-lg">
34+
<div class="p-2 max-w-24">
35+
5 товар
36+
</div>
37+
</div>
38+
39+
<div class="min-w-24 scroll-ml-6 snap-start border border-primary aspect-3/4 rounded-lg">
40+
<div class="p-2 max-w-24">
41+
6 товар
42+
</div>
43+
</div>
44+
45+
<div class="min-w-24 scroll-ml-6 snap-start border border-primary aspect-3/4 rounded-lg">
46+
<div class="p-2 max-w-24">
47+
7 товар
48+
</div>
49+
</div>
50+
51+
<div class="min-w-24 scroll-ml-6 snap-start border border-primary aspect-3/4 rounded-lg">
52+
<div class="p-2 max-w-24">
53+
8 товар
54+
</div>
55+
</div>
56+
57+
<div class="min-w-24 scroll-ml-6 snap-start border border-primary aspect-3/4 rounded-lg">
58+
<div class="p-2 max-w-24">
59+
9 товар
60+
</div>
61+
</div>
62+
</div>
63+
</div>
64+
</div>
65+
</template>

‎apps/storefront-telegram/app/components/catalog/StoriesSlider.vue‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<template>
2+
<div class="max-w-full overflow-x-scroll snap-x">
3+
<div class="w-max flex flex-row flex-wrap gap-2">
4+
<div class="min-w-24 scroll-ml-6 snap-start border border-primary aspect-2/3 rounded-lg">
5+
<div class="p-2 max-w-24">
6+
1 карточка
7+
</div>
8+
</div>
9+
10+
<div class="min-w-24 scroll-ml-6 snap-start border border-primary aspect-2/3 rounded-lg">
11+
2 карточка
12+
</div>
13+
14+
<div class="min-w-24 scroll-ml-6 snap-start border border-primary aspect-2/3 rounded-lg">
15+
3 карточка
16+
</div>
17+
18+
<div class="min-w-24 scroll-ml-6 snap-start border border-primary aspect-2/3 rounded-lg">
19+
4 карточка
20+
</div>
21+
22+
<div class="min-w-24 scroll-ml-6 snap-start border border-primary aspect-2/3 rounded-lg">
23+
5 карточка
24+
</div>
25+
26+
<div class="min-w-24 scroll-ml-6 snap-start border border-primary aspect-2/3 rounded-lg">
27+
6 карточка
28+
</div>
29+
</div>
30+
</div>
31+
</template>

‎apps/storefront-telegram/app/layouts/default.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<main class="tg-text">
2+
<main class="tg-text tg-safe-area">
33
<slot />
44
</main>
55

‎apps/storefront-telegram/app/pages/index.vue‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,17 @@
22
<PageContainer :back="false">
33
<div class="flex flex-row gap-3.5 items-center">
44
<div class="flex flex-col gap-1">
5-
<h2 class="text-lg/5 font-bold">
6-
{{ clientStore.name }}, привет!
7-
</h2>
8-
95
<p>{{ cityStore.selected?.name }}</p>
106
<p>{{ channelStore.name }}</p>
117
</div>
128
</div>
139

14-
<CategoryBlock
10+
<CatalogStoriesSlider />
11+
<CatalogRecommendedSlider />
12+
13+
<CatalogCategoriesSliderMenu />
14+
15+
<CatalogCategoryBlock
1516
v-for="category in menuStore.menu?.categories"
1617
:key="category.id"
1718
:category-id="category.id"
@@ -20,7 +21,6 @@
2021
</template>
2122

2223
<script setup lang="ts">
23-
const clientStore = useClientStore()
2424
const cityStore = useCityStore()
2525
const channelStore = useChannelStore()
2626
const menuStore = useMenuStore()

‎apps/storefront-telegram/app/pages/user.vue‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,13 @@
11
<template>
22
<PageContainer>
3-
<h1>Еще рано сюда заходить</h1>
3+
<UserPointsCard />
4+
5+
<div class="flex flex-row gap-3.5 items-center">
6+
<div class="flex flex-col gap-1">
7+
<h2 class="text-lg/5 font-bold">
8+
Тут будет меню
9+
</h2>
10+
</div>
11+
</div>
412
</PageContainer>
513
</template>

0 commit comments

Comments
 (0)