init git

components/product/Quantity.vue

@@ -0,0 +1,59 @@
+<template>
+    <div class="product-card-quantity">
+        <p v-if="count < 0">{{ $t('unavailable') }}</p>
+        <template v-else-if="count == 0">
+            <Button :label="$t('buy')" icon="isax isax-bag-2" iconPos="right" text @click.prevent="count++" />
+        </template>
+
+        <template v-else>
+            <Button text icon="isax isax-add" @click.prevent="count++" :disabled="count >= range.max" />
+            <p>{{ count }}</p>
+            <Button text icon="isax isax-minus" @click.prevent="count--" :disabled="count <= range.min" />
+        </template>
+    </div>
+</template>
+
+<script setup>
+defineProps({
+    range: { type: Object, default: { min: 1, max: 1000 } }
+})
+const count = defineModel()
+</script>
+
+<style lang="scss">
+.product-card-quantity {
+    @apply flex items-center justify-between w-[4.8rem] h-[1.9rem] lg:w-[5.8rem] lg:h-10 rounded-[1.8rem] border border-primary-600 overflow-hidden;
+
+    p {
+        @apply flex w-max items-center text-primary-600 text-[0.7em] lg:text-[1.1em] font-medium font-vazir mx-auto;
+    }
+
+    &:not(:has(button)) {
+        @apply border-[#7F7F7F];
+
+        p {
+            @apply text-[#7F7F7F];
+        }
+    }
+
+    button {
+        @apply rounded-full font-normal font-iran-sans text-[0.7em] lg:text-[1.1em] #{!important};
+
+        .isax {
+            @apply text-xl;
+        }
+    }
+
+    button:not(:has(.isax-bag-2)) {
+        @apply w-7 h-7 first:mr-1 last:ml-1 #{!important};
+    }
+
+    button:has(.isax-bag-2) {
+        @apply w-full h-full #{!important};
+    }
+
+    button[disabled]{
+        @apply opacity-20;
+    }
+}
+</style>