fuwari/src/components/ArchivePanel.astro

---
import { UNCATEGORIZED } from '@constants/constants'
import I18nKey from '../i18n/i18nKey'
import { i18n } from '../i18n/translation'
import { getSortedPosts } from '../utils/content-utils'
import { getPostUrlBySlug } from '../utils/url-utils'

interface Props {
  keyword?: string
  tags?: string[]
  categories?: string[]
}
const { keyword, tags, categories } = Astro.props

let posts = await getSortedPosts()

if (Array.isArray(tags) && tags.length > 0) {
  posts = posts.filter(
    post =>
      Array.isArray(post.data.tags) &&
      post.data.tags.some(tag => tags.includes(tag)),
  )
}

if (Array.isArray(categories) && categories.length > 0) {
  posts = posts.filter(
    post =>
      (post.data.category && categories.includes(post.data.category)) ||
      (!post.data.category && categories.includes(UNCATEGORIZED)),
  )
}

const groups: { year: number; posts: typeof posts }[] = (() => {
  const groupedPosts = posts.reduce(
    (grouped: { [year: number]: typeof posts }, post) => {
      const year = post.data.published.getFullYear()
      if (!grouped[year]) {
        grouped[year] = []
      }
      grouped[year].push(post)
      return grouped
    },
    {},
  )

  // convert the object to an array
  const groupedPostsArray = Object.keys(groupedPosts).map(key => ({
    year: Number.parseInt(key),
    posts: groupedPosts[Number.parseInt(key)],
  }))

  // sort years by latest first
  groupedPostsArray.sort((a, b) => b.year - a.year)
  return groupedPostsArray
})()

function formatDate(date: Date) {
  const month = (date.getMonth() + 1).toString().padStart(2, '0')
  const day = date.getDate().toString().padStart(2, '0')
  return `${month}-${day}`
}

function formatTag(tag: string[]) {
  return tag.map(t => `#${t}`).join(' ')
}
---

<div class="card-base px-8 py-6">
    {
        groups.map(group => (
            <div>
                <div class="flex flex-row w-full items-center h-[3.75rem]">
                    <div class="w-[15%] md:w-[10%] transition text-2xl font-bold text-right text-75">{group.year}</div>
                    <div class="w-[15%] md:w-[10%]">
                        <div class="h-3 w-3 bg-none rounded-full outline outline-[var(--primary)] mx-auto -outline-offset-[2px] z-50 outline-3"></div>
                    </div>
                    <div class="w-[70%] md:w-[80%] transition text-left text-50">{group.posts.length} {i18n(I18nKey.postsCount)}</div>
                </div>
                {group.posts.map(post => (
                    <a href={getPostUrlBySlug(post.slug)}
                       aria-label={post.data.title}
                       class="group btn-plain !block h-10 w-full rounded-lg hover:text-[initial]"
                    >
                        <div class="flex flex-row justify-start items-center h-full">
                            <!-- date -->
                            <div class="w-[15%] md:w-[10%] transition text-sm text-right text-50">
                                {formatDate(post.data.published)}
                            </div>
                            <!-- dot and line -->
                            <div class="w-[15%] md:w-[10%] relative dash-line h-full flex items-center">
                                <div class="transition-all mx-auto w-1 h-1 rounded group-hover:h-5
                                bg-[oklch(0.5_0.05_var(--hue))] group-hover:bg-[var(--primary)]
                                outline outline-4 z-50
                                outline-[var(--card-bg)]
                                group-hover:outline-[var(--btn-plain-bg-hover)]
                                group-active:outline-[var(--btn-plain-bg-active)]
                                "
                                ></div>
                            </div>
                            <!-- post title -->
                            <div class="w-[70%] md:max-w-[65%] md:w-[65%] text-left font-bold
                                group-hover:translate-x-1 transition-all group-hover:text-[var(--primary)]
                                text-75 pr-8 whitespace-nowrap overflow-ellipsis overflow-hidden"
                            >
                                    {post.data.title}
                            </div>
                            <!-- tag list -->
                            <div class="hidden md:block md:w-[15%] text-left text-sm transition
                            whitespace-nowrap overflow-ellipsis overflow-hidden
                            text-30"
                            >{formatTag(post.data.tags)}</div>
                        </div>
                    </a>
                ))}
            </div>
        ))
    }
</div>