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 maxH: 1,
28 canResize: false,
29 settingsComponent: SectionCardSettings
30} as CardDefinition & { type: 'section' };
31
32export const textAlignClasses: Record<string, string> = {
33 left: '',
34 center: 'text-center justify-center',
35 right: 'text-end justify-end'
36};
37
38export const verticalAlignClasses: Record<string, string> = {
39 top: 'items-stretch',
40 center: 'items-center-safe',
41 bottom: 'items-end-safe'
42};
43
44export const textSizeClasses = ['text-lg', 'text-2xl', 'text-4xl', 'text-5xl'];