Fix blog post gradient bug

frontend/components/articles/ArticlesList.vue

@@ -27,8 +27,9 @@ const isMobile = useMediaQuery('(max-width: 1024px)');
             :title="article.title"
             :comments="2"
             :id="article.id"
+            :slug="article.slug"
             :date="article.created_at"
-            :variant="isMobile ? 'sm' : 'lg'"
+            :variant="'sm'"
             :category="article.category"
             tag="تگ ندارد"
         />

frontend/components/global/BlogPost.vue

@@ -1,24 +1,24 @@
 <script setup lang="ts">
-
 // types
 
 import { usePersianTimeAgo } from "~/composables/global/usePersianTimeAgo";
 
 type Props = {
     id: number;
+    slug: string;
     tag: string;
     date: string;
     title: string;
     description: string;
     variant?: "sm" | "lg";
     category: SubCategory;
-    image: string,
-}
+    image: string;
+};
 
 // props
 
 const props = withDefaults(defineProps<Props>(), {
-    variant: "lg"
+    variant: "lg",
 });
 
 const { date } = toRefs(props);
@@ -26,17 +26,15 @@ const { date } = toRefs(props);
 // state
 
 const createdAt = usePersianTimeAgo(new Date(date.value));
-
 </script>
 
 <template>
     <div>
         <NuxtLink
-            :to="`/article/${id}`"
+            :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"
@@ -48,9 +46,7 @@ const createdAt = usePersianTimeAgo(new Date(date.value));
                 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"
-                >
+                <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>
 
@@ -65,16 +61,13 @@ const createdAt = usePersianTimeAgo(new Date(date.value));
                 :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>
+                        <span class="typo-p-xs md:typo-p-sm text-white"> ۰ نظر </span>
                     </div>
                     <div class="flex items-center gap-2">
                         <Icon
@@ -117,4 +110,4 @@ const createdAt = usePersianTimeAgo(new Date(date.value));
             />
         </NuxtLink>
     </div>
-</template>
+</template>