feat: delivery selector on catalog (#145)

Author: hmbanan666

apps/storefront-telegram/app/app.config.ts

@@ -2,22 +2,27 @@ export default defineAppConfig({
   ui: {
     input: {
       slots: {
-        base: '!ring-muted placeholder:text-muted/50',
+        base: '!ring-default placeholder:text-muted/50',
       },
     },
     inputMenu: {
       slots: {
-        base: '!ring-muted placeholder:text-muted/50',
+        base: '!ring-default placeholder:text-muted/50',
+      },
+    },
+    select: {
+      slots: {
+        base: '!ring-default placeholder:text-muted/50',
       },
     },
     selectMenu: {
       slots: {
-        base: '!ring-muted placeholder:text-muted/50',
+        base: '!ring-default placeholder:text-muted/50',
       },
     },
     textarea: {
       slots: {
-        base: '!ring-muted placeholder:text-muted/50',
+        base: '!ring-default placeholder:text-muted/50',
       },
     },
     button: {
@@ -46,7 +51,7 @@ export default defineAppConfig({
     },
     modal: {
       slots: {
-        content: 'divide-y-0 !ring-muted/50',
+        content: 'divide-y-0 !ring-default',
         header: 'pb-0 min-h-12',
         title: 'font-semibold',
       },

apps/storefront-telegram/app/components/catalog/ClosedNowHeader.vue

@@ -1,10 +1,10 @@
 <template>
   <div
     v-if="isCatalogPage"
-    class="tg-safe-area bg-violet-950 text-yellow-100 motion-preset-slide-down"
+    class="tg-safe-area tg-text-button bg-gradient-to-b from-indigo-950 to-indigo-700 motion-preset-slide-down"
   >
-    <div class="px-4 py-3.5 max-w-[28rem] mx-auto tg-content-safe-area-top">
-      <div class="flex flex-row items-center gap-2">
+    <div class="px-4 py-4 max-w-[28rem] mx-auto tg-content-safe-area-top">
+      <div class="pt-6 flex flex-row items-center gap-2">
         <UIcon name="i-lucide-moon" class="size-12 motion-preset-oscillate-sm motion-preset-seesaw motion-duration-3000" />
 
         <div class="flex flex-col">
@@ -15,6 +15,8 @@
         </div>
       </div>
     </div>
+
+    <div class="tg-bg-secondary h-6 w-full rounded-t-lg overflow-hidden" />
   </div>
 </template>
 

apps/storefront-telegram/app/components/catalog/DeliveryTypeSelector.vue

@@ -0,0 +1,34 @@
+<template>
+  <USelect
+    v-model="value"
+    color="neutral"
+    variant="outline"
+    size="lg"
+    :items="items"
+    :icon="icon"
+    :ui="{
+      base: 'mx-0 w-fit',
+    }"
+  />
+</template>
+
+<script setup lang="ts">
+import type { SelectItem } from '@nuxt/ui'
+
+const items = ref([
+  {
+    label: 'Самовывоз',
+    value: 'pickup',
+    icon: 'i-lucide-store',
+  },
+  {
+    label: 'Доставка',
+    value: 'delivery',
+    icon: 'i-lucide-bike',
+  },
+] satisfies SelectItem[])
+
+const value = ref(items.value[0]?.value)
+
+const icon = computed(() => items.value.find((item) => item.value === value.value)?.icon)
+</script>

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

@@ -1,9 +1,14 @@
 <template>
   <PageContainer :back="false">
-    <div class="flex flex-row gap-3.5 items-center">
+    <div class="flex flex-col gap-4">
+      <CatalogDeliveryTypeSelector />
+
       <div class="flex flex-col gap-1">
-        <h1 class="text-2xl/6 font-bold tracking-tight">
-          Суши Love
+        <p class="text-muted">
+          Суши Love, Калининград-1
+        </p>
+        <h1 class="text-xl/6 font-semibold">
+          улица Фрунзе, 6В
         </h1>
       </div>
     </div>