marzban-dev
101 lines
2.9 KiB
Vue
101 lines
2.9 KiB
Vue
<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> |