feat: card with parallax (#126)

Author: hmbanan666

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

@@ -1,16 +1,58 @@
 <template>
-  <div class="aspect-3/2 bg-primary rounded-lg">
-    <div class="w-full h-full p-4 flex flex-col justify-between tg-text-button">
-      <div class="text-lg/5 font-semibold">
-        {{ clientStore.fullName }}
+  <div ref="target" class="relative w-full h-auto aspect-3/2 perspective-normal motion-preset-slide-down">
+    <div
+      class="absolute inset-0 bg-primary rounded-lg"
+      :style="{
+        transform: `rotateX(${parallax.roll * 3}deg) rotateY(${parallax.tilt * 3}deg)`,
+      }"
+    />
+
+    <div
+      class="z-10 w-full h-full p-4 flex flex-col justify-between tg-text-button"
+      :style="{
+        transform: `rotateX(${parallax.roll * 2}deg) rotateY(${parallax.tilt * 2}deg)`,
+      }"
+    >
+      <div class="flex flex-row justify-between items-center">
+        <div class="flex flex-col gap-3">
+          <div class="text-lg/5 font-medium">
+            Карта лояльности
+          </div>
+          <div class="flex flex-row gap-1.5 items-center">
+            <p class="text-3xl/5 font-semibold">
+              680
+            </p>
+            <UIcon name="fluent:heart-circle-24-filled" class="size-6" />
+          </div>
+        </div>
+
+        <img
+          src="/sushi-heart.svg"
+          alt=""
+          class="w-12 opacity-20 invert-100"
+        >
       </div>
-      <div class="text-3xl/5 font-bold">
-        5%
+
+      <div class="flex flex-row justify-between items-center">
+        <div class="flex flex-row gap-2 items-center">
+          <div class="px-3.5 py-1.5 text-2xl/5 text-primary font-bold ring ring-default bg-default rounded-2xl">
+            5%
+          </div>
+
+          <div>
+            Кешбэк
+          </div>
+        </div>
+
+        <UIcon name="i-lucide-info" class="size-6" />
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-const clientStore = useClientStore()
+import { useParallax } from '@vueuse/core'
+
+const target = useTemplateRef<HTMLElement>('target')
+const parallax = reactive(useParallax(target))
 </script>

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

@@ -1,6 +1,6 @@
 <template>
-  <div class="z-40 sticky top-0 h-fit tg-content-safe-area-top tg-bg-secondary">
-    <div class="max-w-full overflow-x-scroll snap-x">
+  <div class="z-40 sticky -top-0.5 h-fit tg-safe-area tg-bg-secondary">
+    <div class="max-w-full overflow-x-scroll snap-x tg-content-safe-area-top">
       <div class="py-1 w-max flex flex-row flex-wrap gap-1">
         <div
           v-for="category in menuStore.menu?.categories"

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

@@ -1,13 +1,35 @@
 <template>
   <PageContainer>
+    <div class="flex flex-col gap-1">
+      <h1 class="text-xl/5 font-bold">
+        {{ clientStore.fullName }}
+      </h1>
+      <p v-if="clientStore.formattedPhone" class="text-muted text-sm/5 font-medium">
+        {{ clientStore.formattedPhone }}
+      </p>
+    </div>
+
     <UserPointsCard />
 
-    <div class="flex flex-row gap-3.5 items-center">
-      <div class="flex flex-col gap-1">
-        <h2 class="text-lg/5 font-bold">
-          Тут будет меню
-        </h2>
-      </div>
+    <div class="flex flex-col gap-1">
+      <UButtonGroup orientation="vertical" size="xl">
+        <UButton
+          color="neutral"
+          variant="subtle"
+          label="Мои заказы"
+          icon="i-lucide-shopping-basket"
+        />
+        <UButton
+          color="neutral"
+          variant="outline"
+          label="Мои адреса"
+          icon="i-lucide-map-pin-house"
+        />
+      </UButtonGroup>
     </div>
   </PageContainer>
 </template>
+
+<script setup lang="ts">
+const clientStore = useClientStore()
+</script>

apps/storefront-telegram/app/stores/client.ts

@@ -1,10 +1,11 @@
 import { initDataRaw as _initDataRaw, initDataState as _initDataState, useSignal } from '@telegram-apps/sdk-vue'
+import { parsePhoneNumberWithError } from 'libphonenumber-js'
 
 export const useClientStore = defineStore('client', () => {
   const id = ref<string | undefined>(undefined)
   const name = ref<string | undefined>(undefined)
   const surname = ref<string | undefined>(undefined)
-  // const phone = ref<string | null>(null)
+  const phone = ref<string | undefined>(undefined)
   const avatarUrl = ref<string | null>(null)
 
   const initDataRaw = useSignal(_initDataRaw)
@@ -14,6 +15,16 @@ export const useClientStore = defineStore('client', () => {
     return `${name.value} ${surname.value}`
   })
 
+  const formattedPhone = computed(() => {
+    if (!phone.value) {
+      return ''
+    }
+
+    const phoneNumber = parsePhoneNumberWithError(phone.value, 'RU')
+
+    return phoneNumber?.format('INTERNATIONAL')
+  })
+
   async function update() {
     try {
       const data = await $fetch('/api/auth/me', {
@@ -26,9 +37,9 @@ export const useClientStore = defineStore('client', () => {
       }
 
       id.value = data.id
+      phone.value = data.phone
       name.value = data.name
       surname.value = data.surname ?? ''
-      // phone.value = data.phone
       avatarUrl.value = data.avatarUrl
     } catch (error) {
       if (error instanceof Error) {
@@ -68,11 +79,13 @@ export const useClientStore = defineStore('client', () => {
 
   return {
     id,
+    phone,
     name,
     surname,
     avatarUrl,
 
     fullName,
+    formattedPhone,
 
     initDataRaw,
     initDataState,