grain.social
grain.social is a photo sharing platform built on atproto.
chadtmiller.com
1import { Record as Gallery } from "$lexicon/types/social/grain/gallery.ts";
2import { GalleryView } from "$lexicon/types/social/grain/gallery/defs.ts";
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 GalleryDetailsDialog({
10 gallery,
11}: Readonly<{ gallery?: GalleryView | null }>) {
12 return (
13 <Dialog id="gallery-dialog">
14 <Dialog.Content>
15 <Dialog.X class="fill-zinc-950 dark:fill-zinc-50" />
16 <Dialog.Title>
17 {gallery ? "Edit details" : "Create a new gallery"}
18 </Dialog.Title>
19 <form
20 id="gallery-form"
21 class="max-w-xl"
22 hx-post={`/actions/create-edit${
23 gallery ? "?uri=" + gallery?.uri : ""
24 }`}
25 hx-swap="none"
26 _="on htmx:afterOnLoad
27 if event.detail.xhr.status != 200
28 alert('Error: ' + event.detail.xhr.responseText)"
29 >
30 <div class="mb-4 relative">
31 <Label htmlFor="title">Gallery name</Label>
32 <Input
33 type="text"
34 id="title"
35 name="title"
36 class="dark:bg-zinc-800 dark:text-white"
37 required
38 value={(gallery?.record as Gallery)?.title}
39 autofocus
40 />
41 </div>
42 <div class="mb-2 relative">
43 <Label htmlFor="description">Description</Label>
44 <Textarea
45 id="description"
46 name="description"
47 rows={4}
48 class="dark:bg-zinc-800 dark:text-white"
49 >
50 {(gallery?.record as Gallery)?.description}
51 </Textarea>
52 </div>
53 </form>
54 <div class="max-w-xl">
55 <input
56 type="button"
57 name="galleryUri"
58 value={gallery?.uri}
59 class="hidden"
60 />
61 </div>
62 <div class="flex flex-col gap-2 mt-2">
63 <Button
64 variant="primary"
65 form="gallery-form"
66 type="submit"
67 class="w-full"
68 >
69 {gallery ? "Update gallery" : "Create gallery"}
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 </Dialog.Content>
81 </Dialog>
82 );
83}