<template>
    <aside class="blog-aside">
        <div v-for="(items, key) in list" :key="key">
            <h2>{{ $t(key) }}</h2>
            <div>
                <ul>
                    <li v-for="(item, i) in items" :key="i">
                        <BlogItem :data="item" type="small" />
                    </li>
                </ul>
            </div>
        </div>
        <BlogBanners />
    </aside>
</template>

<script setup>
const { lastBlog, topBlog } = inject('data')
const list = reactive({ lastBlog, topBlog })
</script>

<style lang="scss">
.blog-aside {
    @apply max-w-full flex flex-col gap-6 lg:gap-12;
    @apply min-[1725px]:flex-col mx-auto;

    &>div {
        @apply w-full flex overflow-hidden flex-col gap-6 lg:gap-12;

        h2 {
            @apply flex items-center gap-3 text-[#333333] font-bold font-vazir leading-tight;
            @apply text-base lg:text-2xl px-6 lg:px-0;

            &::after {
                @apply content-['_'] grow h-px bg-[#E5E5E5] lg:hidden;
            }
        }

        &>div {
            @apply overflow-x-auto max-w-[100vw] py-px scroll-smooth grow-0;

            &::-webkit-scrollbar {
                @apply hidden;
            }

            ul {
                @apply flex lg:flex-col w-max gap-[1.1rem] lg:gap-6 px-6 lg:px-0;
            }
        }
    }

}
</style>
