your personal website on atproto - mirror
blento.app
flo-bit.dev
1<script lang="ts">
2 import type { QuotedPostData } from '..';
3 import { sanitize } from '$lib/sanitize';
4 import Images from './Images.svelte';
5 import External from './External.svelte';
6 import Video from './Video.svelte';
7
8 const { record }: { record: QuotedPostData } = $props();
9</script>
10
11<div
12 class="border-base-300 dark:border-base-600/30 accent:border-accent-300/20 accent:bg-accent-100/10 bg-base-950/5 dark:bg-base-950/20 overflow-hidden rounded-2xl border text-sm"
13>
14 <div class="p-3">
15 <div class="flex items-center gap-2">
16 {#if record.author.avatar}
17 <img src={record.author.avatar} alt="" class="size-5 rounded-full object-cover" />
18 {/if}
19 <div class="flex items-baseline gap-1.5 overflow-hidden text-xs">
20 {#if record.author.displayName}
21 <span class="text-base-900 dark:text-base-50 truncate font-semibold">
22 {record.author.displayName}
23 </span>
24 {/if}
25 <span class="text-base-500 dark:text-base-400 accent:text-accent-950 truncate">
26 @{record.author.handle}
27 </span>
28 </div>
29 </div>
30 {#if record.htmlContent}
31 <div class="text-base-800 dark:text-base-200 accent:text-base-900 mt-1.5 line-clamp-3">
32 {@html sanitize(record.htmlContent, { ADD_ATTR: ['target'] })}
33 </div>
34 {/if}
35 </div>
36 {#if record.embed}
37 <div class="px-3 pb-3">
38 {#if record.embed.type === 'images'}
39 <Images data={record.embed} />
40 {:else if record.embed.type === 'external' && record.embed.external}
41 <External data={record.embed} />
42 {:else if record.embed.type === 'video' && record.embed.video}
43 <Video data={record.embed} />
44 {/if}
45 </div>
46 {/if}
47</div>