init git

2024-06-16 00:22:14 +04:30
commit ec84dfd222
322 changed files with 77942 additions and 0 deletions
@@ -0,0 +1,77 @@
+<template>
+    <section class="cart-tabs">
+        <ul>
+            <li v-for="(item, i) in tabs" :key="i">
+                <div :active="select == i" @click="select = i" v-ripple>
+                    <h2>{{ $t(item) }}</h2>
+                    <span>{{ i < 1 ? data.length : 0 }}</span>
+                </div>
+            </li>
+        </ul>
+        <Button v-if="device == 'desktop' && data.length > 0" :label="$t('removeAllFromCart')" icon="isax isax-trash"
+            iconPos="right" text raised severity="danger" :loading="loading" @click="clear()" />
+    </section>
+</template>
+
+<script setup>
+const select = ref(0);
+const data = inject('data')
+const tabs = reactive(["cart", "previousPurchase"])
+const { device } = inject('service')
+
+const loading = ref(false)
+const cart = useCartStore()
+
+const clear = async () => {
+    loading.value = true
+    await cart.clear()
+    loading.value = false
+}
+</script>
+
+<style lang="scss">
+.cart-tabs {
+    @apply container w-full h-max max-lg:sticky top-0 flex justify-center lg:justify-start items-center pr-6 lg:pr-0 lg:border-b-2 border-[#E5E5E5];
+    @apply bg-white max-lg:z-[1]; 
+    ul {
+        @apply flex items-center lg:ml-[33.8rem];
+
+        li {
+            @apply whitespace-nowrap;
+
+            div {
+                @apply px-8 py-2.5 lg:px-6 lg:pb-6 flex items-center gap-3 hover:bg-gray-50 rounded-md cursor-pointer;
+
+                h2 {
+                    @apply text-[#999999] text-lg font-normal lg:text-2xl lg:font-medium font-vazir;
+                }
+
+                span {
+                    @apply w-[1.4rem] h-[1.4rem] lg:w-8 lg:h-8 bg-[#F2F2F2] rounded flex items-center justify-center;
+                    @apply text-xs lg:text-lg font-medium font-vazir text-[#999999];
+                }
+            }
+        }
+
+        li:has([active="true"]) {
+            @apply relative;
+
+            * {
+                @apply text-primary-600;
+            }
+
+            &::after {
+                @apply content-['_'] inset-x-0 -bottom-[0.2rem] rounded-full h-0.5 lg:h-1 bg-primary-600 absolute;
+            }
+        }
+    }
+
+    button {
+        @apply h-[3.6rem] mb-3.5 text-[#AD3434];
+
+        .p-button-label {
+            @apply text-sm font-medium font-vazir
+        }
+    }
+}
+</style>