From 713373f964d01b2b58bd436d4d52f8c1ac0356e6 Mon Sep 17 00:00:00 2001
From: marzban-dev <marzban.dev@gmail.com>
Date: Sun, 15 Dec 2024 22:09:32 +0330
Subject: [PATCH] Add comments section

---
 .../components/global/product/Comment.vue     | 23 +++++++++++++++
 frontend/components/product/Comments.vue      | 29 +++++++++++++++++++
 frontend/pages/product/[id].vue               |  2 ++
 3 files changed, 54 insertions(+)
 create mode 100644 frontend/components/global/product/Comment.vue
 create mode 100644 frontend/components/product/Comments.vue

diff --git a/frontend/components/global/product/Comment.vue b/frontend/components/global/product/Comment.vue
new file mode 100644
index 0000000..a6da3de
--- /dev/null
+++ b/frontend/components/global/product/Comment.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+    <div class="w-full p-12 rounded-150 bg-white border-[0.5px] border-slate-200 flex flex-col gap-6">
+        <div class="flex justify-between items-start w-full">
+            <div class="flex flex-col gap-3">
+                <span class="typo-h-6 text-black">
+                    خیلی محصول خوبی بودددد
+                </span>
+                <span class="typo-p-sm text-slate-500">
+                    منصور مرزبان در ۱۴۰۳/۱۲/۲ ساعت ۱۲:۳۴
+                </span>
+            </div>
+            <Rating />
+        </div>
+        <div class="typo-p-md">
+            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون
+            بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرد گذشته.
+        </div>
+    </div>
+</template>
\ No newline at end of file
diff --git a/frontend/components/product/Comments.vue b/frontend/components/product/Comments.vue
new file mode 100644
index 0000000..15c2611
--- /dev/null
+++ b/frontend/components/product/Comments.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+    <section class="bg-slate-50 p-20">
+        <div class="flex gap-12 my-42 container">
+            <div class="flex flex-col gap-6 min-w-fit">
+                <h3 class="typo-h-3">
+                    نظرات کاربران
+                </h3>
+                <div class="flex flex-col gap-2">
+                    <Rating />
+                    <span class="typo-p-sm">
+                    بر اساس ۴ نظر
+                </span>
+                </div>
+                <Button class="rounded-full">
+                    نظر بنویسید
+                </Button>
+            </div>
+            <div class="flex flex-col gap-12">
+                <Comment />
+                <Comment />
+                <Comment />
+            </div>
+        </div>
+    </section>
+</template>
\ No newline at end of file
diff --git a/frontend/pages/product/[id].vue b/frontend/pages/product/[id].vue
index 5c80c07..851fad8 100644
--- a/frontend/pages/product/[id].vue
+++ b/frontend/pages/product/[id].vue
@@ -4,4 +4,6 @@
 
 <template>
     <ProductView />
+    <Video />
+    <Comments />
 </template>
\ No newline at end of file