82 lines
3.0 KiB
Plaintext
82 lines
3.0 KiB
Plaintext
---
|
|
import { Icon } from "astro-icon/components";
|
|
import I18nKey from "../i18n/i18nKey";
|
|
import { i18n } from "../i18n/translation";
|
|
import { formatDateToYYYYMMDD } from "../utils/date-utils";
|
|
import { getCategoryUrl, getTagUrl } from "../utils/url-utils";
|
|
|
|
interface Props {
|
|
class: string;
|
|
published: Date;
|
|
updated?: Date;
|
|
tags: string[];
|
|
category: string | null;
|
|
hideTagsForMobile?: boolean;
|
|
hideUpdateDate?: boolean;
|
|
}
|
|
const {
|
|
published,
|
|
updated,
|
|
tags,
|
|
category,
|
|
hideTagsForMobile = false,
|
|
hideUpdateDate = false,
|
|
} = 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-2", 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-50 text-sm font-medium">{formatDateToYYYYMMDD(published)}</span>
|
|
</div>
|
|
|
|
<!-- update date -->
|
|
{!hideUpdateDate && updated && updated.getTime() !== published.getTime() && (
|
|
<div class="flex items-center">
|
|
<div class="meta-icon"
|
|
>
|
|
<Icon name="material-symbols:edit-calendar-outline-rounded" class="text-xl"></Icon>
|
|
</div>
|
|
<span class="text-50 text-sm font-medium">{formatDateToYYYYMMDD(updated)}</span>
|
|
</div>
|
|
)}
|
|
|
|
<!-- categories -->
|
|
<div class="flex items-center">
|
|
<div class="meta-icon"
|
|
>
|
|
<Icon name="material-symbols:book-2-outline-rounded" class="text-xl"></Icon>
|
|
</div>
|
|
<div class="flex flex-row flex-nowrap items-center">
|
|
<a href={getCategoryUrl(category)} aria-label={`View all posts in the ${category} category`}
|
|
class="link-lg transition text-50 text-sm font-medium
|
|
hover:text-[var(--primary)] dark:hover:text-[var(--primary)] whitespace-nowrap">
|
|
{category || i18n(I18nKey.uncategorized)}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- tags -->
|
|
<div class:list={["items-center", {"flex": !hideTagsForMobile, "hidden md:flex": hideTagsForMobile}]}>
|
|
<div class="meta-icon"
|
|
>
|
|
<Icon name="material-symbols:tag-rounded" class="text-xl"></Icon>
|
|
</div>
|
|
<div class="flex flex-row flex-nowrap items-center">
|
|
{(tags && tags.length > 0) && tags.map((tag, i) => (
|
|
<div class:list={[{"hidden": i == 0}, "mx-1.5 text-[var(--meta-divider)] text-sm"]}>/</div>
|
|
<a href={getTagUrl(tag)} aria-label={`View all posts with the ${tag.trim()} tag`}
|
|
class="link-lg transition text-50 text-sm font-medium
|
|
hover:text-[var(--primary)] dark:hover:text-[var(--primary)] whitespace-nowrap">
|
|
{tag.trim()}
|
|
</a>
|
|
))}
|
|
{!(tags && tags.length > 0) && <div class="transition text-50 text-sm font-medium">{i18n(I18nKey.noTags)}</div>}
|
|
</div>
|
|
</div>
|
|
</div> |