Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
Svelte
1234567891011121314151617181920212223242526272829303132<script lang="ts"> import Megaphone from "$icon/megaphone"; import { formatDate } from "$lib/format"; import PreviewCard from "$lib/components/timeline/PreviewCard.svelte"; import type { BlogPost } from "$lib/components/timeline/types";
let { posts = [] }: { posts?: BlogPost[] } = $props();</script>
<PreviewCard title="Announcements" icon={Megaphone}> <div class="flex min-h-32 flex-col divide-y divide-border-default rounded-b bg-background-default" > {#if posts.length > 0} <div class="flex flex-col"> {#each posts as post (post.slug)} <a href="https://blog.tangled.org/{post.slug}" class="flex flex-col gap-3xs overflow-hidden p-md typography-paragraph-small no-underline hover:bg-background-subtle hover:no-underline" > <span class="truncate text-foreground-subtle">{formatDate(post.date)}</span> <span class="truncate text-foreground-default">{post.title}</span> {#if post.subtitle} <span class="line-clamp-1 text-foreground-subtle">{post.subtitle}</span> {/if} </a> {/each} </div> {/if} </div></PreviewCard>