marzban-dev
63 lines
1.6 KiB
Vue
63 lines
1.6 KiB
Vue
<script lang="ts" setup>
|
|
|
|
// import
|
|
|
|
import useGetArticles from "~/composables/api/blog/useGetArticles";
|
|
import ArticlesList from "~/components/articles/ArticlesList.vue";
|
|
|
|
// state
|
|
|
|
const page = ref(1);
|
|
const search = ref("");
|
|
const debouncedSearch = refDebounced(search, 700);
|
|
|
|
const { data: articles, suspense } = useGetArticles(page, debouncedSearch);
|
|
|
|
// ssr
|
|
|
|
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>
|
|
|
|
<!-- This is for masonry js package -->
|
|
|
|
<ClientOnly>
|
|
<ArticlesList :articles="articles!.results" />
|
|
</ClientOnly>
|
|
|
|
<div class="w-full flex-center pt-24 pb-10">
|
|
<Pagination :items="[]" :total="100" />
|
|
</div>
|
|
</div>
|
|
</template> |