your personal website on atproto - mirror
blento.app
flo-bit.dev
1<script lang="ts">
2 import type { Item } from '$lib/types';
3 import { textSizeClasses } from '.';
4 import type { ContentComponentProps } from '../types';
5 import { ToggleGroup, ToggleGroupItem, Button } from '@foxui/core';
6
7 let { item = $bindable<Item>() }: ContentComponentProps = $props();
8
9 const classes = 'size-8 min-w-8 [&_svg]:size-3 cursor-pointer';
10</script>
11
12<div class="flex flex-col gap-2">
13 <ToggleGroup
14 type="single"
15 bind:value={
16 () => {
17 return item.cardData.verticalAlign ?? 'center';
18 },
19 (value) => {
20 if (!value) return;
21 item.cardData.verticalAlign = value;
22 }
23 }
24 >
25 <ToggleGroupItem size="sm" value="top" class={classes}
26 ><svg
27 xmlns="http://www.w3.org/2000/svg"
28 viewBox="0 0 24 24"
29 fill="none"
30 stroke="currentColor"
31 stroke-width="2"
32 stroke-linecap="round"
33 stroke-linejoin="round"
34 ><rect width="6" height="16" x="4" y="6" rx="2" /><rect
35 width="6"
36 height="9"
37 x="14"
38 y="6"
39 rx="2"
40 /><path d="M22 2H2" /></svg
41 >
42 </ToggleGroupItem>
43 <ToggleGroupItem size="sm" value="center" class={classes}
44 ><svg
45 xmlns="http://www.w3.org/2000/svg"
46 viewBox="0 0 24 24"
47 fill="none"
48 stroke="currentColor"
49 stroke-width="2"
50 stroke-linecap="round"
51 stroke-linejoin="round"
52 ><rect width="10" height="6" x="7" y="9" rx="2" /><path d="M22 20H2" /><path
53 d="M22 4H2"
54 /></svg
55 ></ToggleGroupItem
56 >
57 <ToggleGroupItem size="sm" value="bottom" class={classes}
58 ><svg
59 xmlns="http://www.w3.org/2000/svg"
60 viewBox="0 0 24 24"
61 fill="none"
62 stroke="currentColor"
63 stroke-width="2"
64 stroke-linecap="round"
65 stroke-linejoin="round"
66 ><rect width="14" height="6" x="5" y="12" rx="2" /><rect
67 width="10"
68 height="6"
69 x="7"
70 y="2"
71 rx="2"
72 /><path d="M2 22h20" /></svg
73 ></ToggleGroupItem
74 >
75 </ToggleGroup>
76
77 <ToggleGroup
78 type="single"
79 bind:value={
80 () => {
81 return item.cardData.textAlign ?? 'left';
82 },
83 (value) => {
84 if (!value) return;
85 item.cardData.textAlign = value;
86 }
87 }
88 >
89 <ToggleGroupItem size="sm" value="left" class={classes}
90 ><svg
91 xmlns="http://www.w3.org/2000/svg"
92 viewBox="0 0 24 24"
93 fill="none"
94 stroke="currentColor"
95 stroke-width="2"
96 stroke-linecap="round"
97 stroke-linejoin="round"><path d="M21 5H3" /><path d="M15 12H3" /><path d="M17 19H3" /></svg
98 ></ToggleGroupItem
99 >
100 <ToggleGroupItem size="sm" value="center" class={classes}
101 ><svg
102 xmlns="http://www.w3.org/2000/svg"
103 viewBox="0 0 24 24"
104 fill="none"
105 stroke="currentColor"
106 stroke-width="2"
107 stroke-linecap="round"
108 stroke-linejoin="round"><path d="M21 5H3" /><path d="M17 12H7" /><path d="M19 19H5" /></svg
109 ></ToggleGroupItem
110 >
111 <ToggleGroupItem size="sm" value="right" class={classes}
112 ><svg
113 xmlns="http://www.w3.org/2000/svg"
114 viewBox="0 0 24 24"
115 fill="none"
116 stroke="currentColor"
117 stroke-width="2"
118 stroke-linecap="round"
119 stroke-linejoin="round"><path d="M21 5H3" /><path d="M21 12H9" /><path d="M21 19H7" /></svg
120 ></ToggleGroupItem
121 >
122 </ToggleGroup>
123
124 <div>
125 <Button
126 variant="ghost"
127 onclick={() => {
128 item.cardData.textSize = Math.max((item.cardData.textSize ?? 1) - 1, 0);
129 }}
130 disabled={(item.cardData.textSize ?? 1) < 1}
131 >
132 <svg
133 xmlns="http://www.w3.org/2000/svg"
134 width="24"
135 height="24"
136 viewBox="0 0 24 24"
137 fill="none"
138 stroke="currentColor"
139 stroke-width="2"
140 stroke-linecap="round"
141 stroke-linejoin="round"
142 class="lucide lucide-aarrow-down-icon lucide-a-arrow-down"
143 ><path d="m14 12 4 4 4-4" /><path d="M18 16V7" /><path
144 d="m2 16 4.039-9.69a.5.5 0 0 1 .923 0L11 16"
145 /><path d="M3.304 13h6.392" /></svg
146 >
147 </Button>
148 <Button
149 variant="ghost"
150 onclick={() => {
151 item.cardData.textSize = Math.min(
152 (item.cardData.textSize ?? 1) + 1,
153 textSizeClasses.length - 1
154 );
155 }}
156 disabled={(item.cardData.textSize ?? 1) >= textSizeClasses.length - 1}
157 >
158 <svg
159 xmlns="http://www.w3.org/2000/svg"
160 width="24"
161 height="24"
162 viewBox="0 0 24 24"
163 fill="none"
164 stroke="currentColor"
165 stroke-width="2"
166 stroke-linecap="round"
167 stroke-linejoin="round"
168 class="lucide lucide-aarrow-up-icon lucide-a-arrow-up"
169 ><path d="m14 11 4-4 4 4" /><path d="M18 16V7" /><path
170 d="m2 16 4.039-9.69a.5.5 0 0 1 .923 0L11 16"
171 /><path d="M3.304 13h6.392" /></svg
172 >
173 </Button>
174 </div>
175</div>