From 2c9de38acafd4faca4f7325891ef9be1d4410963 Mon Sep 17 00:00:00 2001
From: marzban-dev <marzban.dev@gmail.com>
Date: Fri, 13 Dec 2024 23:47:50 +0330
Subject: [PATCH] Create product view section

---
 frontend/assets/css/tailwind.css              |  1 +
 frontend/components/global/ProductColor.vue   | 36 ++++++++++++
 .../global/product-detail/InfoCard.vue        | 20 +++++++
 .../global/product-detail/QuantityCounter.vue | 58 +++++++++++++++++++
 .../global/product-detail/Rating.vue          | 33 +++++++++++
 .../global/product-detail/RemainQuantity.vue  | 28 +++++++++
 .../global/product-detail/Share.vue           | 23 ++++++++
 frontend/components/product/ProductView.vue   | 55 ++++++++++++++++++
 frontend/components/ui/ColorCircle.vue        | 23 +++++++-
 frontend/pages/product/[id].vue               |  7 +++
 10 files changed, 283 insertions(+), 1 deletion(-)
 create mode 100644 frontend/components/global/ProductColor.vue
 create mode 100644 frontend/components/global/product-detail/InfoCard.vue
 create mode 100644 frontend/components/global/product-detail/QuantityCounter.vue
 create mode 100644 frontend/components/global/product-detail/Rating.vue
 create mode 100644 frontend/components/global/product-detail/RemainQuantity.vue
 create mode 100644 frontend/components/global/product-detail/Share.vue
 create mode 100644 frontend/components/product/ProductView.vue
 create mode 100644 frontend/pages/product/[id].vue

diff --git a/frontend/assets/css/tailwind.css b/frontend/assets/css/tailwind.css
index 7a9d77f..d5f4c30 100644
--- a/frontend/assets/css/tailwind.css
+++ b/frontend/assets/css/tailwind.css
@@ -114,6 +114,7 @@
     --breakpoint-2xs: 400px;
     --breakpoint-xs: 480px;
 
+
     /* ANIMATIONS */
     --animate-marquee: marquee 3s linear infinite;
 
diff --git a/frontend/components/global/ProductColor.vue b/frontend/components/global/ProductColor.vue
new file mode 100644
index 0000000..f500e02
--- /dev/null
+++ b/frontend/components/global/ProductColor.vue
@@ -0,0 +1,36 @@
+<script lang="ts" setup>
+
+// types
+
+import ColorCircle from "~/components/ui/ColorCircle.vue";
+
+type Props = {
+    colors: string[];
+    selectedColor: string;
+}
+
+// props
+
+defineProps<Props>();
+
+// emit
+
+defineEmits(["update:selectedColor"]);
+
+</script>
+
+<template>
+    <div>
+        <span>
+            Color : {{ selectedColor}}
+        </span>
+        <div>
+            <ColorCircle
+                v-for="color in colors"
+                :key="color"
+                :color="color"
+                :selected="selectedColor === color"
+            />
+        </div>
+    </div>
+</template>
\ No newline at end of file
diff --git a/frontend/components/global/product-detail/InfoCard.vue b/frontend/components/global/product-detail/InfoCard.vue
new file mode 100644
index 0000000..6972e6e
--- /dev/null
+++ b/frontend/components/global/product-detail/InfoCard.vue
@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+
+</script>
+
+<template>
+    <div class="flex items-center justify-between w-full bg-slate-100 border-[1.5px] border-slate-200 rounded-100 p-6">
+        <div class="flex items-start gap-3">
+            <div class="flex p-1 items-center justify-center rounded-full bg-success-500">
+                <Icon name="ci:check" class="size-4 **:stroke-white"/>
+            </div>
+            <div class="flex flex-col gap-1">
+                <span class="typo-label-sm whitespace-nowrap">Pick up from Store</span>
+                <span class="typo-p-sm whitespace-nowrap">Usually ready in 2 hours</span>
+            </div>
+        </div>
+        <span class="typo-p-xs">
+            Check availability at other stores
+        </span>
+    </div>
+</template>
\ No newline at end of file
diff --git a/frontend/components/global/product-detail/QuantityCounter.vue b/frontend/components/global/product-detail/QuantityCounter.vue
new file mode 100644
index 0000000..eab8fbb
--- /dev/null
+++ b/frontend/components/global/product-detail/QuantityCounter.vue
@@ -0,0 +1,58 @@
+<script lang="ts" setup>
+
+// types
+
+type Props = {
+    modelValue: number;
+    max: number;
+}
+
+// props
+
+const props = defineProps<Props>();
+const { modelValue } = toRefs(props);
+
+// emit
+
+const emit = defineEmits(["update:modelValue"]);
+
+// state
+
+const currentQuantity = ref(modelValue.value);
+
+// methods
+
+const onInput = (e: any) => {
+    currentQuantity.value = Number(e.target.value);
+};
+
+// watch
+
+watch(() => currentQuantity.value, (newValue) => {
+    emit("update:modelValue", newValue);
+});
+
+
+</script>
+
+<template>
+    <div class="">
+        <NumberFieldRoot
+            class="rounded-full border-slate-200 border-[1.5px] flex items-center bg-white gap-4 p-4"
+            v-model="currentQuantity"
+            :min="1"
+            :max="max"
+        >
+            <NumberFieldIncrement class="cursor-pointer">
+                <Icon name="ci:plus" class="**:stroke-slate-500 size-5" />
+            </NumberFieldIncrement>
+            <NumberFieldInput
+                @input="onInput"
+                class="field-sizing-content bg-transparent outline-none typo-label-md text-black"
+            />
+            <NumberFieldDecrement class="cursor-pointer">
+                <Icon name="ci:minus" class="**:stroke-slate-500 size-5" />
+            </NumberFieldDecrement>
+        </NumberFieldRoot>
+    </div>
+</template>
\ No newline at end of file
diff --git a/frontend/components/global/product-detail/Rating.vue b/frontend/components/global/product-detail/Rating.vue
new file mode 100644
index 0000000..76ae042
--- /dev/null
+++ b/frontend/components/global/product-detail/Rating.vue
@@ -0,0 +1,33 @@
+<script lang="ts">
+
+</script>
+
+<template>
+    <div class="flex items-center gap-2">
+        <span class="typo-p-sm">
+            5.0
+        </span>
+        <div class="flex items-center gap-1">
+            <Icon
+                name="ci:star-solid"
+                class="size-4.5 **:fill-yellow-500"
+            />
+            <Icon
+                name="ci:star-solid"
+                class="size-4.5 **:fill-yellow-500"
+            />
+            <Icon
+                name="ci:star-solid"
+                class="size-4.5 **:fill-yellow-500"
+            />
+            <Icon
+                name="ci:star-solid"
+                class="size-4.5 **:fill-yellow-500"
+            />
+            <Icon
+                name="ci:star-solid"
+                class="size-4.5 **:fill-yellow-500"
+            />
+        </div>
+    </div>
+</template>
\ No newline at end of file
diff --git a/frontend/components/global/product-detail/RemainQuantity.vue b/frontend/components/global/product-detail/RemainQuantity.vue
new file mode 100644
index 0000000..243a894
--- /dev/null
+++ b/frontend/components/global/product-detail/RemainQuantity.vue
@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+
+// types
+
+type Props = {
+    quantity: number;
+}
+
+// props
+
+defineProps<Props>();
+
+</script>
+
+<template>
+    <div class="flex flex-col gap-2 w-full items-end">
+        <p class="typo-p-sm text-slate-500">
+            Hurry, only
+            <span class="text-black">
+                {{ quantity }}
+            </span>
+            items left in stock
+        </p>
+        <div class="h-2 rounded-full relative bg-slate-200 w-full">
+            <div class="w-[85%] h-full absolute left-0 rounded-full bg-black" />
+        </div>
+    </div>
+</template>
\ No newline at end of file
diff --git a/frontend/components/global/product-detail/Share.vue b/frontend/components/global/product-detail/Share.vue
new file mode 100644
index 0000000..aa5afec
--- /dev/null
+++ b/frontend/components/global/product-detail/Share.vue
@@ -0,0 +1,23 @@
+<template>
+    <div class="flex items-center gap-6">
+        <span class="typo-p-md text-black">
+            Share:
+        </span>
+        <div class="flex items-center gap-3">
+            <NuxtLink>
+                <Icon name="ci:instagram" class="**:stroke-slate-500 size-6" />
+            </NuxtLink>
+            <NuxtLink>
+                <Icon name="ci:facebook" class="**:stroke-slate-500 size-6" />
+            </NuxtLink>
+            <NuxtLink>
+                <Icon name="ci:tiktok" class="**:stroke-slate-500 size-6" />
+            </NuxtLink>
+            <NuxtLink>
+                <Icon name="ci:youtube" class="**:stroke-slate-500 size-6" />
+            </NuxtLink>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+</script>
\ No newline at end of file
diff --git a/frontend/components/product/ProductView.vue b/frontend/components/product/ProductView.vue
new file mode 100644
index 0000000..9aa13ab
--- /dev/null
+++ b/frontend/components/product/ProductView.vue
@@ -0,0 +1,55 @@
+<script lang="ts" setup>
+
+// state
+const quantity = ref(1);
+const maxQuantity = ref(10);
+
+</script>
+
+<template>
+    <div class="flex gap-12">
+        <div class="w-[800px] flex flex-col items-end gap-3 mt-12">
+            <span class="typo-label-sm">
+                Nova
+            </span>
+            <h1 class="typo-h-2">
+                Nova
+            </h1>
+            <div class="flex w-full items-center justify-between">
+                <Rating />
+                <span class="typo-p-2xl">
+                    $689.00
+                </span>
+            </div>
+            <p class="typo-p-md text-slate-500 text-left">
+                Compact, stylish, and engineered for the future, Eco Tunes are more than just headphones; they're a
+                statement. Hear the future, save the planet.
+            </p>
+            <div class="w-full flex flex-col gap-6 mt-4">
+                <RemainQuantity :quantity="maxQuantity" />
+                <div class="w-full flex gap-3 flex-col">
+                    <div class="w-full flex gap-3">
+                        <Button
+                            class="w-full"
+                            end-icon="ci:plus"
+                        >
+                            Add to cart
+                        </Button>
+                        <QuantityCounter v-model="quantity" :max="maxQuantity" />
+                    </div>
+                    <Button
+                        class="w-full"
+                        variant="outlined"
+                    >
+                        Buy it now
+                    </Button>
+                </div>
+                <InfoCard />
+                <Share />
+            </div>
+        </div>
+        <div class="bg-red-300 w-full h-[500px] rounded-200">
+
+        </div>
+    </div>
+</template>
\ No newline at end of file
diff --git a/frontend/components/ui/ColorCircle.vue b/frontend/components/ui/ColorCircle.vue
index c29cfdf..76e87d7 100644
--- a/frontend/components/ui/ColorCircle.vue
+++ b/frontend/components/ui/ColorCircle.vue
@@ -1,3 +1,24 @@
+<script lang="ts" setup>
+
+// types
+
+type Props = {
+    color: string;
+    selected ?: boolean;
+}
+
+// props
+
+defineProps<Props>();
+
+</script>
+
 <template>
-    <div class="size-[30px] rounded-full shadow-black/30 shadow-inner"></div>
+    <div
+        class="size-[30px] ring ring-offset-1 rounded-full shadow-black/30 shadow-inner"
+        :class="selected ? 'ring-black' : 'ring-transparent'"
+        :style="{
+            backgroundColor: color,
+        }"
+    />
 </template>
\ No newline at end of file
diff --git a/frontend/pages/product/[id].vue b/frontend/pages/product/[id].vue
new file mode 100644
index 0000000..5c80c07
--- /dev/null
+++ b/frontend/pages/product/[id].vue
@@ -0,0 +1,7 @@
+<script lang="ts" setup>
+
+</script>
+
+<template>
+    <ProductView />
+</template>
\ No newline at end of file