From 6fc96e2da84a5b3b336f1a86068786cea20832f1 Mon Sep 17 00:00:00 2001
From: marzban-dev <marzban.dev@gmail.com>
Date: Fri, 23 May 2025 08:42:58 +0330
Subject: [PATCH] Updated

---
 frontend/components/global/BlogPost.vue | 140 ++++++++++++------------
 1 file changed, 69 insertions(+), 71 deletions(-)

diff --git a/frontend/components/global/BlogPost.vue b/frontend/components/global/BlogPost.vue
index e5e9a9f..89db980 100644
--- a/frontend/components/global/BlogPost.vue
+++ b/frontend/components/global/BlogPost.vue
@@ -29,85 +29,83 @@ const createdAt = usePersianTimeAgo(new Date(date.value));
 </script>
 
 <template>
-    <div>
-        <NuxtLink
-            :to="`/article/${slug}`"
-            :class="variant === 'lg' ? 'aspect-square rounded-150 overflow-hidden' : 'h-fit'"
-            class="group w-full relative block"
+    <NuxtLink
+        :to="`/article/${slug}`"
+        :class="variant === 'lg' ? 'aspect-square rounded-150 overflow-hidden' : 'h-fit'"
+        class="group w-full relative block"
+    >
+        <Tag
+            v-if="variant === 'lg'"
+            class="bg-slate-950 absolute left-6 top-6 z-20"
         >
-            <Tag
-                v-if="variant === 'lg'"
-                class="bg-slate-950 absolute left-6 top-6 z-20"
-            >
+            {{ category.name }}
+        </Tag>
+
+        <div
+            v-if="variant === 'sm'"
+            class="aspect-square w-full rounded-150 overflow-hidden relative"
+        >
+            <Tag class="bg-slate-950 absolute z-20 left-4 sm:left-6 top-4 sm:top-6 max-sm:text-xs">
                 {{ category.name }}
             </Tag>
 
-            <div
-                v-if="variant === 'sm'"
-                class="aspect-square w-full rounded-150 overflow-hidden relative"
-            >
-                <Tag class="bg-slate-950 absolute z-20 left-4 sm:left-6 top-4 sm:top-6 max-sm:text-xs">
-                    {{ category.name }}
-                </Tag>
-
-                <NuxtImg
-                    :src="image"
-                    class="group-hover:scale-105 transition-transform duration-200 absolute size-full object-cover z-10"
-                    alt=""
-                />
-            </div>
-
-            <div
-                :class="variant === 'lg' ? 'absolute px-6' : 'invert mt-6'"
-                class="bottom-6 lg:bottom-8 flex flex-col gap-4 z-20"
-            >
-                <div class="flex items-center gap-4 lg:gap-6">
-                    <div class="flex items-center gap-2">
-                        <Icon
-                            name="ci:comment"
-                            class="**:stroke-white size-3 md:size-3.5"
-                        />
-                        <span class="typo-p-xs md:typo-p-sm text-white"> ۰ نظر </span>
-                    </div>
-                    <div class="flex items-center gap-2">
-                        <Icon
-                            name="ci:calendar"
-                            class="**:stroke-white size-3 md:size-3.5"
-                        />
-                        <span class="typo-p-xs md:typo-p-sm text-white">
-                            {{ createdAt }}
-                        </span>
-                    </div>
-                </div>
-
-                <div class="flex gap-4 flex-col">
-                    <span
-                        :class="variant === 'lg' ? 'line-clamp-2' : ''"
-                        class="text-base md:text-lg font-medium lg:typo-h-6 text-white"
-                    >
-                        {{ title }}
-                    </span>
-                    <p
-                        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>
-
             <NuxtImg
-                v-if="variant === 'lg'"
                 :src="image"
                 class="group-hover:scale-105 transition-transform duration-200 absolute size-full object-cover z-10"
                 alt=""
             />
+        </div>
 
-            <div
-                v-if="variant === 'lg'"
-                class="w-full h-full bg-linear-to-t from-black to-transparent absolute inset-0 z-15"
-            />
-        </NuxtLink>
-    </div>
+        <div
+            :class="variant === 'lg' ? 'absolute px-6' : 'invert mt-6'"
+            class="bottom-6 lg:bottom-8 flex flex-col gap-4 z-20"
+        >
+            <div class="flex items-center gap-4 lg:gap-6">
+                <div class="flex items-center gap-2">
+                    <Icon
+                        name="ci:comment"
+                        class="**:stroke-white size-3 md:size-3.5"
+                    />
+                    <span class="typo-p-xs md:typo-p-sm text-white"> ۰ نظر </span>
+                </div>
+                <div class="flex items-center gap-2">
+                    <Icon
+                        name="ci:calendar"
+                        class="**:stroke-white size-3 md:size-3.5"
+                    />
+                    <span class="typo-p-xs md:typo-p-sm text-white">
+                        {{ createdAt }}
+                    </span>
+                </div>
+            </div>
+
+            <div class="flex gap-4 flex-col">
+                <span
+                    :class="variant === 'lg' ? 'line-clamp-2' : ''"
+                    class="text-base md:text-lg font-medium lg:typo-h-6 text-white"
+                >
+                    {{ title }}
+                </span>
+                <p
+                    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>
+
+        <NuxtImg
+            v-if="variant === 'lg'"
+            :src="image"
+            class="group-hover:scale-105 transition-transform duration-200 absolute size-full object-cover z-10"
+            alt=""
+        />
+
+        <div
+            v-if="variant === 'lg'"
+            class="w-full h-full bg-linear-to-t from-black to-transparent absolute inset-0 z-15"
+        />
+    </NuxtLink>
 </template>