your personal website on atproto - mirror
blento.app
flo-bit.dev
1import { COLUMNS } from '$lib';
2import type { CardDefinition } from '../types';
3import EditingSectionCard from './EditingSectionCard.svelte';
4import SectionCard from './SectionCard.svelte';
5import SectionCardSettings from './SectionCardSettings.svelte';
6
7export const SectionCardDefinition = {
8 type: 'section',
9 contentComponent: SectionCard,
10 editingContentComponent: EditingSectionCard,
11 createNew: (card) => {
12 card.cardType = 'section';
13 card.cardData = {
14 text: 'hello world',
15 verticalAlign: 'bottom',
16 textSize: 1
17 };
18
19 card.h = 1;
20 card.mobileH = 2;
21
22 card.w = COLUMNS;
23 card.mobileW = COLUMNS;
24 },
25
26 defaultColor: 'transparent',
27 minW: COLUMNS,
28 maxH: 1,
29 canResize: false,
30 settingsComponent: SectionCardSettings,
31
32 name: 'Heading',
33 groups: ['Core'],
34
35 icon: `<svg
36 xmlns="http://www.w3.org/2000/svg"
37 viewBox="0 0 24 24"
38 fill="none"
39 stroke="currentColor"
40 stroke-width="2"
41 stroke-linecap="round"
42 stroke-linejoin="round"
43 class="size-4"
44 ><path d="M6 12h12" /><path d="M6 20V4" /><path d="M18 20V4" /></svg
45>`
46} as CardDefinition & { type: 'section' };
47
48export const textAlignClasses: Record<string, string> = {
49 left: '',
50 center: 'text-center justify-center',
51 right: 'text-end justify-end'
52};
53
54export const verticalAlignClasses: Record<string, string> = {
55 top: 'items-stretch',
56 center: 'items-center-safe',
57 bottom: 'items-end-safe'
58};
59
60export const textSizeClasses = ['text-lg', 'text-2xl', 'text-4xl', 'text-5xl'];