Updated

frontend/components/global/BlogPost.vue

@@ -2,6 +2,8 @@
 
 // types
 
+import { usePersianTimeAgo } from "~/composables/global/usePersianTimeAgo";
+
 type Props = {
     id: number;
     tag: string;
@@ -9,15 +11,22 @@ type Props = {
     title: string;
     description: string;
     variant?: "sm" | "lg";
+    category: SubCategory;
     image: string,
 }
 
 // props
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
     variant: "lg"
 });
 
+const { date } = toRefs(props);
+
+// state
+
+const createdAt = usePersianTimeAgo(new Date(date.value));
+
 </script>
 
 <template>
@@ -32,7 +41,7 @@ withDefaults(defineProps<Props>(), {
                 v-if="variant === 'lg'"
                 class="bg-success-500 absolute left-6 top-6 z-20"
             >
-                اسپیکر
+                {{ category.name }}
             </Tag>
 
             <div
@@ -42,7 +51,7 @@ withDefaults(defineProps<Props>(), {
                 <Tag
                     class="bg-success-500 absolute z-20 left-4 sm:left-6 top-4 sm:top-6 max-sm:text-xs"
                 >
-                    اسپیکر
+                    {{ category.name }}
                 </Tag>
 
                 <img
@@ -73,7 +82,7 @@ withDefaults(defineProps<Props>(), {
                             class="**:stroke-white size-3 md:size-3.5"
                         />
                         <span class="typo-p-xs md:typo-p-sm text-white">
-                            ۳۱ مهر ۱۴۰۳
+                            {{ createdAt }}
                         </span>
                     </div>
                 </div>
@@ -89,7 +98,8 @@ withDefaults(defineProps<Props>(), {
                         v-if="variant === 'sm'"
                         class="text-white typo-p-xs max-sm:!leading-[175%] sm:typo-p-sm md:typo-p-md line-clamp-3"
                     >
-                        تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها
+                        تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو
+                        در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها
                     </p>
                 </div>
             </div>