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