Create articles page

2025-01-30 03:03:21 +03:30
parent 14ae01b6d1
commit a02660e391
1 changed files with 101 additions and 0 deletions
@@ -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>