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 groups: ['Core'],
22
23 icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-4"
24 ><path
25 fill="none"
26 stroke="currentColor"
27 stroke-linecap="round"
28 stroke-linejoin="round"
29 stroke-width="2"
30 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"
31 /></svg
32 >`
33} as CardDefinition & { type: 'text' };
34
35export const textAlignClasses: Record<string, string> = {
36 left: '',
37 center: 'text-center justify-center',
38 right: 'text-end justify-end'
39};
40
41export const verticalAlignClasses: Record<string, string> = {
42 top: 'items-stretch',
43 center: 'items-center-safe',
44 bottom: 'items-end-safe'
45};
46
47export const textSizeClasses = [
48 'text-lg',
49 'text-xl',
50 'text-2xl',
51 'text-3xl',
52 'text-4xl',
53 'text-5xl'
54];