your personal website on atproto - mirror
blento.app
flo-bit.dev
1<script lang="ts">
2 import type { PostEmbedExternal } from '..';
3
4 const { data }: { data: PostEmbedExternal } = $props();
5
6 // svelte-ignore state_referenced_locally
7 const domain = new URL(data.external.href).hostname.replace('www.', '');
8</script>
9
10<article
11 class={[
12 'group dark:bg-base-900 bg-base-200 border-base-300 dark:border-base-600/30 relative isolate flex max-w-md flex-col justify-end overflow-hidden rounded-2xl border p-4',
13 data.external.thumb ? 'aspect-video' : ''
14 ]}
15>
16 {#if data.external.thumb}
17 <img
18 src={data.external.thumb}
19 alt={data.external.description}
20 class="absolute inset-0 -z-10 size-full object-cover transition-transform duration-500 ease-in-out group-hover:scale-102"
21 />
22 {/if}
23 <div
24 class="dark:from-base-950/90 dark:via-base-950/40 from-base-50/90 via-base-50/40 absolute inset-0 -z-10 bg-linear-to-t"
25 ></div>
26
27 <div
28 class="text-base-700 dark:text-base-300 flex flex-wrap items-center gap-y-1 overflow-hidden text-sm"
29 >
30 <div>{domain}</div>
31 </div>
32 <h3
33 class="dark:text-base-50 text-base-900 group-hover:text-accent-600 dark:group-hover:text-accent-400 mt-1 text-lg/6 font-semibold transition-colors duration-200"
34 >
35 <a href={data.external.href} target="_blank" rel="noopener noreferrer nofollow">
36 <span class="absolute inset-0"></span>
37 {data.external.title}
38 </a>
39 </h3>
40</article>