cdrdpyj/src/pages/[locale]/news/index.astro

---
import MainLayout from "@/layouts/MainLayout.astro"
import Header from "@/components/Header.astro"
import NewsList from "@/components/cards/NewsList.astro";
import { getCollection, getEntry } from "astro:content";
import FooterSection from "@/components/section/FooterSection.astro";


import { createTranslator } from '@/i18n';
const tl = createTranslator(Astro.currentLocale);

const newsItems = await getCollection("news", (post)=>{
    const currentLocale = Astro.currentLocale;
    return post.data.locale == currentLocale
});

const sortedPosts = [...newsItems]
    .sort((a, b) => {
        const dateDiff = new Date(b.data.date).getTime() - new Date(a.data.date).getTime()
        if (dateDiff !== 0) return dateDiff
        return (a.data.order ?? 0) - (b.data.order ?? 0)
    });

const allTags = [...new Set(
    sortedPosts
        .filter(p => p.data.tags && p.data.tags.length > 0)
        .flatMap(p => p.data.tags)
        .filter((tag): tag is string => tag !== undefined)
)].sort();
---

<MainLayout >
    <div class="top-16 relative mb container mx-auto">
            <Header />
    </div>
    <div class="container mx-auto mt-4">
        <div class="flex flex-col lg:w-1/2 items-center mx-auto py-8">
            <h1 class="text-white text-2xl uppercase font-bold text-center mb-4 font-primary md:mt-20 mt-10">{tl("news.title")}</h1>
        <h2 class="text-white text-3xl lg:text-5xl font-bold text-center font-secondary mb-4">{tl("news.text")}</h2>
    </div>
    
    {allTags.length > 0 && (
        <div class="container mx-auto mb-8">
            <div class="flex flex-nowrap md:flex-wrap gap-2 justify-center overflow-x-auto md:overflow-visible pb-2 md:pb-0">
                <button class="filter-btn px-4 py-2 font-primary text-sm cursor-pointer transition-colors whitespace-nowrap" data-tag="all">
                    {tl("news.all")}
                </button>
                {allTags.map((tag) => (
                    <button class="filter-btn px-4 py-2 font-primary text-sm cursor-pointer transition-colors whitespace-nowrap" data-tag={tag!}>
                        {tag}
                    </button>
                ))}
            </div>
        </div>
    )}

    <div class="flex flex-col md:gap-0 gap-2 lg:max-w-4xl mx-auto bg-white p-4 md:p-8">
        {
        sortedPosts.map((item) => (
            <div class="news-item" data-tags={JSON.stringify(item.data.tags || [])}>
                <NewsList data={item} content={{ body: item.body }} />
            </div>
        ))
        }
    </div>
    </div>
    <FooterSection />

</MainLayout>

<script>
    const activeClasses = "bg-[#003421] text-[#EBE5D0]";
    const inactiveClasses = "bg-[#003421]/20 text-[#EBE5D0] hover:bg-[#003421]/30";

    function activateTag(tag: string | null) {
        document.querySelectorAll('.filter-btn').forEach(b => {
            if (b.getAttribute('data-tag') === tag) {
                b.classList.remove(...inactiveClasses.split(" "));
                b.classList.add(...activeClasses.split(" "));
            } else {
                b.classList.remove(...activeClasses.split(" "));
                b.classList.add(...inactiveClasses.split(" "));
            }
        });

        document.querySelectorAll('.news-item').forEach(item => {
            const itemTags = JSON.parse(item.getAttribute('data-tags') || '[]');
            if (tag === 'all' || tag === null || itemTags.includes(tag)) {
                (item as HTMLElement).style.display = 'block';
            } else {
                (item as HTMLElement).style.display = 'none';
            }
        });
    }

    function updateUrl(tag: string | null) {
        const url = new URL(window.location.href);
        if (tag && tag !== 'all') {
            url.searchParams.set('tag', tag);
        } else {
            url.searchParams.delete('tag');
        }
        window.history.replaceState({}, '', url.toString());
    }

    function initTags() {
        document.querySelectorAll('.filter-btn').forEach(btn => {
            btn.classList.add(...inactiveClasses.split(" "));
        });

        const urlParams = new URLSearchParams(window.location.search);
        if (urlParams.has('tag')) {
            urlParams.delete('tag');
            window.history.replaceState({}, '', window.location.pathname + window.location.search);
        }

        document.querySelector('.filter-btn[data-tag="all"]')?.classList.add(...activeClasses.split(" "));
        document.querySelector('.filter-btn[data-tag="all"]')?.classList.remove(...inactiveClasses.split(" "));
        activateTag('all');

        document.querySelectorAll('.filter-btn').forEach(btn => {
            btn.addEventListener('click', () => {
                const tag = btn.getAttribute('data-tag');
                activateTag(tag);
                updateUrl(tag);
            });
        });
    }

    document.addEventListener('astro:page-load', initTags);
    if (document.readyState === 'complete') {
        initTags();
    }
</script>