your personal website on atproto - mirror
blento.app
flo-bit.dev
1<script lang="ts">
2 import { getDescription, getHideProfileSection, getName } from '$lib/helper';
3 import type { WebsiteData } from '$lib/types';
4 import { Button, Checkbox, Heading, Input, Label, Modal, Textarea } from '@foxui/core';
5
6 export type Settings = {
7 title: string;
8 };
9
10 let { open = $bindable(), data = $bindable() }: { open: boolean; data: WebsiteData } = $props();
11
12 let name = $state(getName(data));
13
14 $effect(() => {
15 if (!open && name && name !== getName(data)) {
16 data.publication ??= {};
17 data.publication.name = name;
18
19 data = { ...data };
20 }
21 });
22</script>
23
24<Modal bind:open class="dark:bg-base-900">
25 <Heading>Settings</Heading>
26 <Label>Name</Label>
27 <Input bind:value={name} />
28 <Label class="mt-4">Description</Label>
29 <Textarea
30 rows={5}
31 bind:value={
32 () => {
33 return getDescription(data);
34 },
35 (value) => {
36 data.publication ??= {};
37 data.publication.description = value;
38
39 data = { ...data };
40 }
41 }
42 />
43
44 <div class="flex items-center space-x-2">
45 <Checkbox
46 bind:checked={
47 () => {
48 return getHideProfileSection(data);
49 },
50 (value) => {
51 data.publication ??= {};
52 data.publication.preferences ??= {};
53 data.publication.preferences.hideProfileSection = value;
54
55 data = { ...data };
56 }
57 }
58 id="hide-profile"
59 aria-labelledby="hide-profile-label"
60 variant="secondary"
61 />
62 <Label
63 id="hide-profile-label"
64 for="hide-profile"
65 class="text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
66 >
67 Hide Profile Section
68 </Label>
69 </div>
70
71 <div class="flex w-full justify-end space-x-2">
72 <Button onclick={() => (open = false)}>Close</Button>
73 </div>
74</Modal>