flo-bit.dev
your personal website on atproto - mirror
blento.app
1<script lang="ts" module>
2 export interface BlogItem {
3 title: string;
4 date: string;
5 description?: string;
6 href: string;
7 }
8</script>
9
10<script lang="ts">
11 import DateTime from './DateTime.svelte';
12
13 let { title, date, description, href }: BlogItem = $props();
14</script>
15
16<article class="group/article relative isolate flex flex-col">
17 <div class="text-base-500 accent:text-accent-950 flex shrink-0 items-center gap-x-4 text-xs">
18 {#if date && !isNaN(new Date(date).getTime())}
19 <DateTime date={new Date(date)} />
20 {/if}
21 </div>
22 <div class="max-w-xl">
23 <div class="text-base-900 dark:text-base-50 mt-3 text-lg leading-6 font-semibold">
24 <a {href} target="_blank">
25 <span class="absolute inset-0"></span>
26 {title}
27 </a>
28
29 <div
30 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"
31 ></div>
32 </div>
33 <p class="text-base-600 dark:text-base-400 accent:text-base-800 mt-5 text-sm leading-6">
34 {description}
35 </p>
36 </div>
37</article>