your personal website on atproto - mirror
blento.app
flo-bit.dev
1import type { CardDefinition } from '../types';
2import EditingTextCard from './EditingTextCard.svelte';
3import TextCard from './TextCard.svelte';
4import TextCardSettings from './TextCardSettings.svelte';
5
6export const TextCardDefinition = {
7 type: 'text',
8 contentComponent: TextCard,
9 editingContentComponent: EditingTextCard,
10 createNew: (card) => {
11 card.cardType = 'text';
12 card.cardData = {
13 text: 'hello world'
14 };
15 },
16
17 settingsComponent: TextCardSettings,
18
19 name: 'Text',
20
21 keywords: ['paragraph', 'note', 'write', 'content', 'description', 'bio'],
22 groups: ['Core'],
23
24 icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-4"
25 ><path
26 fill="none"
27 stroke="currentColor"
28 stroke-linecap="round"
29 stroke-linejoin="round"
30 stroke-width="2"
31 d="m15 16l2.536-7.328a1.02 1.02 1 0 1 1.928 0L22 16m-6.303-2h5.606M2 16l4.039-9.69a.5.5 0 0 1 .923 0L11 16m-7.696-3h6.392"
32 /></svg
33 >`
34} as CardDefinition & { type: 'text' };
35
36export const textAlignClasses: Record<string, string> = {
37 left: '',
38 center: 'text-center justify-center',
39 right: 'text-end justify-end'
40};
41
42export const verticalAlignClasses: Record<string, string> = {
43 top: 'items-stretch',
44 center: 'items-center-safe',
45 bottom: 'items-end-safe'
46};
47
48export const textSizeClasses = [
49 'text-lg',
50 'text-xl',
51 'text-2xl',
52 'text-3xl',
53 'text-4xl',
54 'text-5xl'
55];