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