Connect comment data to ui

frontend/components/global/product/Comment.vue

@@ -1,24 +1,33 @@
 <script setup lang="ts">
-
 // type
 
 type Props = {
-    title: string,
+    title: string;
-    date: string,
+    date: string;
-    username: string,
+    first_name: string;
-    content: string,
+    last_name: string;
-    rate : number
+    content: string;
-}
+    rate: number;
+};
 
 // props
 
 const props = defineProps<Props>();
-const { date } = toRefs(props);
+const { date, first_name, last_name } = toRefs(props);
 
 // state
 
 const formattedDate = useDateFormat(date.value, "YYYY/MM/DD");
 
+// computed
+
+const username = computed(() => {
+    if (first_name.value.length === 0 || last_name.value.length === 0) {
+        return "کاربر هیملز";
+    }
+
+    return `${first_name.value} ${last_name.value}`;
+});
 </script>
 
 <template>
@@ -26,7 +35,7 @@ const formattedDate = useDateFormat(date.value, "YYYY/MM/DD");
         <div class="flex justify-between items-start w-full max-sm:flex-col gap-4">
             <div class="flex flex-col gap-3">
                 <span class="text-lg font-semibold sm:typo-h-6 text-black">
-                   {{ title }}
+                    {{ title }}
                 </span>
                 <span class="typo-p-xs sm:typo-p-sm text-slate-500">
                     {{ username }}
@@ -34,10 +43,10 @@ const formattedDate = useDateFormat(date.value, "YYYY/MM/DD");
                     {{ formattedDate }}
                 </span>
             </div>
-            <Rating :rate="rate"/>
+            <Rating :rate="rate" />
         </div>
         <div class="typo-p-md">
             {{ content }}
         </div>
     </div>
-</template>
+</template>