<script setup lang="ts">

// state

import useGetArticles from "~/composables/api/blog/useGetArticles";

const page = ref(1);
const { data: articles, suspense } = useGetArticles(page);

// ssr

await suspense();

</script>

<template>
    <section class="mt-20 container">
        <div class="flex items-center justify-between mb-12 md:mb-20">
            <span class="typo-h-6 max-sm:text-xl md:typo-h-5 lg:typo-h-4 text-black">
                مقالات اخیر سایت
            </span>
            <NuxtLink to="/articles">
                <Button variant="outlined" class="rounded-full max-sm:typo-label-sm max-sm:py-2"
                        end-icon="ci:arrow-left">
                    نمایش همه
                </Button>
            </NuxtLink>
        </div>
        <ArticlesList :articles="[...articles!.results,...articles!.results,...articles!.results,...articles!.results,...articles!.results,...articles!.results]" />
    </section>
</template>