merge with front and add in stuck

frontend/components/global/BlogPost.vue

@@ -25,7 +25,7 @@ const {} = toRefs(props);
 <template>
     <div
         :class="variant === 'lg' ? 'rounded-150 overflow-hidden' : ''"
-        class="max-h-[700px] h-[700px] relative"
+        class="group max-h-[700px] h-[700px] relative"
     >
 
         <Tag
@@ -47,7 +47,7 @@ const {} = toRefs(props);
 
             <img
                 :src="image"
-                class="absolute size-full object-cover z-10"
+                class="group-hover:scale-105 transition-transform duration-200 absolute size-full object-cover z-10"
                 alt=""
             />
         </div>
@@ -106,7 +106,7 @@ const {} = toRefs(props);
         <img
             v-if="variant === 'lg'"
             :src="image"
-            class="absolute size-full object-cover z-10"
+            class="group-hover:scale-105 transition-transform duration-200 absolute size-full object-cover z-10"
             alt=""
         />
 

frontend/components/global/Pagination.vue

@@ -38,23 +38,23 @@ watch(
         show-edges
         v-model:page="page"
     >
-        <PaginationList v-slot="{ items }" class="flex items-center gap-1">
+        <PaginationList v-slot="{ items }" class="flex items-center gap-2">
             <PaginationLast
-                class="w-9 h-9 flex items-center justify-center bg-transparent cursor-pointer hover:bg-stone-700/20 transition disabled:opacity-50 disabled:cursor-not-allowed rounded-lg"
+                class="px-2 h-9 font-light whitespace-nowrap flex items-center justify-center bg-transparent cursor-pointer transition disabled:opacity-50 disabled:cursor-not-allowed rounded-lg"
             >
-                <Icon name="bi:chevron-double-right" class="**:stroke-black" />
+                برو آخر
             </PaginationLast>
             <PaginationNext
-                class="w-9 h-9 ml-4 flex items-center justify-center cursor-pointer hover:bg-stone-700/20 transition disabled:opacity-50 disabled:cursor-not-allowed rounded-lg"
+                class="w-9 h-9 ml-4 flex items-center justify-center cursor-pointer hover:bg-slate-100 transition disabled:opacity-50 disabled:cursor-not-allowed rounded-lg"
             >
-                <Icon name="bi:chevron-right" class="**:stroke-black" />
+                <Icon name="ci:chevron-right" class="**:fill-back" size="18px" />
             </PaginationNext>
 
             <template v-for="(page, index) in items">
                 <PaginationListItem
                     v-if="page.type === 'page'"
                     :key="index"
-                    class="w-9 h-9 border border-stone-800 rounded-lg data-[selected]:!bg-black data-[selected]:text-white data-[selected]:shadow-sm hover:bg-stone-700/20 transition"
+                    class="w-9 h-9 cursor-pointer bg-slate-100 rounded-lg data-[selected]:!bg-black data-[selected]:text-white data-[selected]:shadow-sm hover:bg-slate-200 transition"
                     :value="page.value"
                 >
                     {{ page.value }}
@@ -63,21 +63,21 @@ watch(
                     v-else
                     :key="page.type"
                     :index="index"
-                    class="w-9 h-9 flex items-center justify-center"
+                    class="w-9 h-9 select-none flex items-center justify-center"
                 >
                     &#8230;
                 </PaginationEllipsis>
             </template>
 
             <PaginationPrev
-                class="w-9 h-9 flex items-center justify-center bg-transparent cursor-pointer hover:bg-stone-700/20 transition mr-4 disabled:opacity-50 disabled:cursor-not-allowed rounded-lg"
+                class="w-9 h-9 flex items-center justify-center bg-transparent cursor-pointer hover:bg-slate-100 transition mr-4 disabled:opacity-50 disabled:cursor-not-allowed rounded-lg"
             >
-                <Icon name="bi:chevron-left" class="**:stroke-black" />
+                <Icon name="ci:chevron-left" class="**:fill-back" size="18px" />
             </PaginationPrev>
             <PaginationFirst
-                class="w-9 h-9 flex items-center justify-center bg-transparent cursor-pointer hover:bg-stone-700/20 transition disabled:opacity-50 disabled:cursor-not-allowed rounded-lg"
+                class="px-2 h-9 font-light flex items-center whitespace-nowrap justify-center bg-transparent cursor-pointer transition disabled:opacity-50 disabled:cursor-not-allowed rounded-lg"
             >
-                <Icon name="bi:chevron-double-left" class="**:stroke-black" />
+                برو اول
             </PaginationFirst>
         </PaginationList>
     </PaginationRoot>

frontend/components/home/LatestStories.vue

@@ -17,9 +17,11 @@ const {} = toRefs(props);
             <span class="typo-h-4 text-black">
                 مقالات اخیر سایت
             </span>
-            <Button variant="outlined" class="rounded-full" start-icon="ci:paper">
-                نمایش همه
-            </Button>
+            <NuxtLink to="/articles">
+                <Button variant="outlined" class="rounded-full" start-icon="ci:paper">
+                    نمایش همه
+                </Button>
+            </NuxtLink>
         </div>
         <div class="flex gap-12">
             <div class="flex-1 flex flex-col gap-12">

frontend/composables/api/blog/useGetArticles.ts

@@ -0,0 +1,38 @@
+// imports
+
+import { useQuery } from "@tanstack/vue-query";
+import { API_ENDPOINTS, QUERY_KEYS } from "~/constants";
+
+// types
+
+export type GetArticlesResponse = ApiPaginated<UserComment>;
+
+const useGetArticles = (
+    page: Ref<number>,
+    search: Ref<string>
+) => {
+
+    // state
+
+    const { $axios: axios } = useNuxtApp();
+
+    // methods
+
+    const handleGetArticles = async () => {
+        const { data } = await axios.get<GetArticlesResponse>(`${API_ENDPOINTS.blog.articles}`, {
+            params: {
+                offset: (page.value * 10) - 10,
+                limit: 10,
+                search: search.value.length > 0 ? search.value : undefined,
+            }
+        });
+        return data;
+    };
+
+    return useQuery({
+        queryKey: [QUERY_KEYS.articles, page, search],
+        queryFn: () => handleGetArticles()
+    });
+};
+
+export default useGetArticles;

frontend/constants/index.ts

@@ -1,5 +1,9 @@
 export const API_ENDPOINTS = {
-    home : "/home",
+    home: "/home",
+    blog: {
+        articles: "/blogs/all",
+        article: "/blogs"
+    },
     account: {
         profile: "/accounts/profile",
         send_otp: "/accounts/send_otp"
@@ -26,6 +30,8 @@ export const API_ENDPOINTS = {
 };
 
 export const QUERY_KEYS = {
+    articles: "articles",
+    article: "article",
     comments: "comments",
     home: "home",
     chat: "chat",

frontend/pages/articles.vue

@@ -0,0 +1,101 @@
+<script lang="ts" setup>
+
+// import
+
+import useGetArticles from "~/composables/api/blog/useGetArticles";
+
+// state
+
+const page = ref(1);
+const search = ref("");
+const debouncedSearch = refDebounced(search, 700);
+
+const { data: articles, suspense } = useGetArticles(page, debouncedSearch);
+
+// ssr
+
+await useAsyncData(async () => {
+
+    const response = await suspense();
+
+    if (response.isError) {
+        throw createError({
+            statusCode: 500,
+            statusMessage: `Error in categories page prefetch`
+        });
+    }
+});
+</script>
+
+<template>
+    <div class="container" style="margin-top: 80px">
+        <div class="flex items-center justify-between mb-20">
+            <span class="typo-h-4 text-black">
+                مقالات اخیر سایت
+            </span>
+            <Input
+                class="max-w-[400px] w-full rounded-full"
+                variant="outlined"
+                placeholder="جستجو..."
+                v-model="search"
+            >
+                <template #endItem>
+                    <div class="flex items-center gap-1">
+                        <Icon
+                            class="translate-y-[-1px]"
+                            name="ci:search"
+                            size="24"
+                        />
+                    </div>
+                </template>
+            </Input>
+        </div>
+        <div class="flex gap-12">
+            <div class="flex-1 flex flex-col gap-12">
+                <BlogPost
+                    image="/img/blog-1.jpeg"
+                    description="aaasd"
+                    title="asd"
+                    :comments="2"
+                    link="#"
+                    date="2020-06-10"
+                    tag="asdsa"
+                />
+                <BlogPost
+                    image="/img/blog-2.jpeg"
+                    description="aaasd"
+                    title="asd"
+                    :comments="2"
+                    link="#"
+                    date="2020-06-10"
+                    tag="asdsa"
+                />
+            </div>
+            <div class="flex-[0.8] flex flex-col">
+                <BlogPost
+                    image="/img/blog-3.jpeg"
+                    description="aaasd"
+                    title="asd"
+                    :comments="2"
+                    link="#"
+                    date="2020-06-10"
+                    tag="asdsa"
+                    variant="sm"
+                />
+                <BlogPost
+                    image="/img/blog-4.jpeg"
+                    description="aaasd"
+                    title="asd"
+                    :comments="2"
+                    link="#"
+                    date="2020-06-10"
+                    tag="asdsa"
+                    variant="sm"
+                />
+            </div>
+        </div>
+        <div class="w-full flex-center pt-24 pb-10">
+            <Pagination :items="[]" :total="100" />
+        </div>
+    </div>
+</template>