blog/src/components/PostMetadata.astro

---
import {formatDateToYYYYMMDD} from "../utils/date-utils";
import { Icon } from 'astro-icon/components';
import {i18n} from "../i18n/translation";
import I18nKey from "../i18n/i18nKey";

interface Props {
    class: string;
    pubDate: Date;
    tags: string[];
    categories: string[];
}
const {pubDate, tags, categories} = Astro.props;
const className = Astro.props.class;
---

<div class:list={["flex flex-wrap text-neutral-500 dark:text-neutral-400 items-center gap-4 gap-x-4 gap-y-3", className]}>
    <!-- publish date -->
    <div class="flex items-center">
        <div class="meta-icon"
        >
            <Icon name="material-symbols:calendar-today-outline-rounded" class="text-xl"></Icon>
        </div>
        <span class="text-black/50 dark:text-white/50 text-sm font-medium">{formatDateToYYYYMMDD(pubDate)}</span>
    </div>

    <!-- categories -->
    <div class="flex items-center">
        <div class="meta-icon"
        >
            <Icon name="material-symbols:menu-rounded" class="text-xl"></Icon>
        </div>
        <div class="flex flex-row">
            {categories && categories.map(category => <div
                    class="with-divider"
            >
                <a href=`/archive/category/${category}`
                   class="link transition text-black/50 dark:text-white/50 text-sm font-medium
                                hover:text-[var(--primary)] dark:hover:text-[var(--primary)]">
                    {category}
                </a>
            </div>)}
            {!categories && <div class="transition text-black/50 dark:text-white/50 text-sm font-medium">{i18n(I18nKey.uncategorized)}</div>}
        </div>
    </div>

    <!-- tags -->
    <div class="flex items-center">
        <div class="meta-icon"
        >
            <Icon name="material-symbols:tag-rounded" class="text-xl"></Icon>
        </div>
        <div class="flex flex-row">
            {tags && tags.map(tag => <div
                    class="with-divider"
            >
                <a href=`/archive/tag/${tag}`
                   class="link transition text-black/50 dark:text-white/50 text-sm font-medium
                                hover:text-[var(--primary)] dark:hover:text-[var(--primary)]">
                    {tag}
                </a>
            </div>)}
            {!tags && <div class="transition text-black/50 dark:text-white/50 text-sm font-medium">{i18n(I18nKey.noTags)}</div>}
        </div>
    </div>
</div>

<style>
@tailwind components;

@layer components {
    .meta-icon {
        @apply w-8 h-8 transition rounded-md flex items-center justify-center bg-[var(--btn-regular-bg)]
        text-[var(--btn-content)] mr-2
    }
    .with-divider {
        @apply before:content-['/'] before:mx-[6px] before:text-[var(--meta-divider)] before:text-sm
        before:font-medium before:first-of-type:hidden before:transition
    }
}
</style>