<template>
    <section>
        <ul>
            <li v-for="(item, i) in blogs" :key="i">
                <BlogItem :data="item" />
            </li>
        </ul>
        <AppPagination :pages="pages" />
    </section>
</template>

<script setup>
const { blogs, pages } = inject('data')
</script>

<style lang="scss">
.blog>section {
    @apply flex flex-col justify-between px-4 lg:px-6 xl:px-0 w-full xl:w-auto items-center;

    &>ul:not([class]) {
        @apply flex flex-col gap-6 max-lg:w-full;
    }

    .pagination {
        @apply self-center my-[1.9rem] lg:my-[7.4rem];
    }
}
</style>
