grain.social
grain.social is a photo sharing platform built on atproto.
chadtmiller.com
1import { ProfileView } from "$lexicon/types/social/grain/actor/defs.ts";
2import { AvatarInput } from "./AvatarInput.tsx";
3import { Button } from "./Button.tsx";
4import { Dialog } from "./Dialog.tsx";
5import { Input } from "./Input.tsx";
6import { Label } from "./Label.tsx";
7import { Textarea } from "./Textarea.tsx";
8
9export function ProfileDialog({
10 profile,
11}: Readonly<{
12 profile: ProfileView;
13}>) {
14 return (
15 <Dialog>
16 <Dialog.Content>
17 <Dialog.X class="fill-zinc-950 dark:fill-zinc-50" />
18 <Dialog.Title>Edit my profile</Dialog.Title>
19 <form
20 id="profile-form"
21 hx-encoding="multipart/form-data"
22 autocomplete="off"
23 _="on submit
24 halt the event
25 put 'Updating...' into #submit-button.innerText
26 add @disabled to #submit-button
27 call Grain.profileDialog.updateProfile(me)
28 on htmx:afterOnLoad
29 put 'Update' into #submit-button.innerText
30 remove @disabled from #submit-button
31 if event.detail.xhr.status != 200
32 alert('Error: ' + event.detail.xhr.responseText)
33 else
34 trigger closeDialog
35 end"
36 >
37 <AvatarInput profile={profile} />
38 <div class="mb-4 relative">
39 <Label htmlFor="displayName">Display Name</Label>
40 <Input
41 type="text"
42 id="displayName"
43 name="displayName"
44 placeholder="e.g. Ansel Lastname"
45 value={profile.displayName}
46 autoFocus
47 autocomplete="off"
48 />
49 </div>
50 <div class="mb-4 relative">
51 <Label htmlFor="description">Description</Label>
52 <Textarea
53 id="description"
54 name="description"
55 placeholder="Tell us about yourself"
56 rows={4}
57 class="dark:bg-zinc-800 dark:text-white"
58 >
59 {profile.description}
60 </Textarea>
61 </div>
62 <div class="flex flex-col gap-2">
63 <Button
64 type="submit"
65 id="submit-button"
66 variant="primary"
67 class="w-full"
68 >
69 Update
70 </Button>
71 <Button
72 variant="secondary"
73 type="button"
74 class="w-full"
75 _={Dialog._closeOnClick}
76 >
77 Cancel
78 </Button>
79 </div>
80 </form>
81 </Dialog.Content>
82 </Dialog>
83 );
84}