62 lines
1.4 KiB
Svelte
62 lines
1.4 KiB
Svelte
<script lang="ts">
|
|
export let date: string | Date;
|
|
export let readDuration: number | undefined;
|
|
export let rating: string | number | undefined;
|
|
export let author: string | undefined;
|
|
|
|
const toDate = (d: string | Date) =>
|
|
typeof d === "string" ? new Date(d) : d;
|
|
|
|
const iso = (d: string | Date) => {
|
|
if(!d) return ""
|
|
const v = toDate(d);
|
|
if(!v?.getTime) return ""
|
|
return isNaN(v.getTime()) ? "" : v.toISOString();
|
|
};
|
|
|
|
function formatRating(rating: string | number) {
|
|
if (typeof rating === "number") {
|
|
return "⭐".repeat(rating);
|
|
}
|
|
return rating;
|
|
}
|
|
|
|
const formatDate = (d: string | Date) => {
|
|
try {
|
|
return new Intl.DateTimeFormat("de-DE", {
|
|
day: "2-digit",
|
|
month: "long",
|
|
year: "numeric",
|
|
}).format(toDate(d));
|
|
} catch (err) {
|
|
return "";
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<div class="flex gap-3 wrapper">
|
|
{#if rating}
|
|
<div class="text-sm bg-light">{formatRating(rating)}</div>
|
|
{/if}
|
|
{#if date}
|
|
<time class="text-sm bg-light" datetime={iso(date)}
|
|
>{formatDate(date)}</time>
|
|
{/if}
|
|
{#if readDuration > 1}
|
|
<div class="text-sm bg-light">{readDuration} mins read</div>
|
|
{/if}
|
|
{#if author}
|
|
<div class="text-sm bg-light">{author}</div>
|
|
{/if}
|
|
</div>
|
|
|
|
|
|
<style>
|
|
.wrapper > * {
|
|
padding: 2px 11px;
|
|
border-radius: 14px;
|
|
font-size: 11px;
|
|
opacity: 0.7;
|
|
}
|
|
</style>
|