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