your personal website on atproto - mirror
blento.app
flo-bit.dev
1<script lang="ts">
2 import DateTime from './DateTime.svelte';
3
4 let {
5 title,
6 date,
7 description,
8 href
9 }: { title: string; date: string; description: string; href: string } = $props();
10</script>
11
12<article class="group/article relative isolate flex flex-col">
13 <div class="text-base-500 accent:text-accent-950 flex shrink-0 items-center gap-x-4 text-xs">
14 <DateTime date={new Date(date)} />
15 </div>
16 <div class="max-w-xl">
17 <div class="text-base-900 dark:text-base-50 mt-3 text-lg leading-6 font-semibold">
18 <a {href} target="_blank">
19 <span class="absolute inset-0"></span>
20 {title}
21 </a>
22
23 <div
24 class="bg-base-200/30 accent:bg-accent-200/20 dark:bg-base-800/30 absolute -inset-2 -z-10 scale-95 rounded-2xl opacity-0 transition-all duration-150 group-hover/article:scale-100 group-hover/article:opacity-100"
25 ></div>
26 </div>
27 <p class="text-base-600 dark:text-base-400 accent:text-base-800 mt-5 text-sm leading-6">
28 {description}
29 </p>
30 </div>
31</article>