your personal website on atproto - mirror
blento.app
flo-bit.dev
1<script lang="ts">
2 import { marked } from 'marked';
3 import type { ContentComponentProps } from '../types';
4 import { textAlignClasses, textSizeClasses, verticalAlignClasses } from '.';
5
6 let { item }: ContentComponentProps = $props();
7
8 const renderer = new marked.Renderer();
9 renderer.link = ({ href, title, text }) =>
10 `<a target="_blank" href="${href}" title="${title}">${text}</a>`;
11</script>
12
13<div
14 class={[
15 'line-clamp-1 inline-flex h-full w-full rounded-md p-1 px-2 font-semibold',
16 textAlignClasses[item.cardData.textAlign as string],
17 verticalAlignClasses[item.cardData.verticalAlign ?? ('center' as string)],
18 textSizeClasses[(item.cardData.textSize ?? 1) as number]
19 ]}
20>
21 {item.cardData.text}
22</div>