grain.social
grain.social is a photo sharing platform built on atproto.
chadtmiller.com
1import { PhotoView } from "$lexicon/types/social/grain/photo/defs.ts";
2import { AtUri } from "@atproto/syntax";
3import { Button } from "./Button.tsx";
4import { Dialog } from "./Dialog.tsx";
5import { Label } from "./Label.tsx";
6import { Textarea } from "./Textarea.tsx";
7
8export function PhotoAltDialog({
9 photo,
10}: Readonly<{
11 photo: PhotoView;
12}>) {
13 return (
14 <Dialog id="photo-alt-dialog">
15 <Dialog.Content>
16 <Dialog.X class="fill-zinc-950 dark:fill-zinc-50" />
17 <Dialog.Title>Add alt text</Dialog.Title>
18 <div class="aspect-square relative">
19 <img
20 src={photo.fullsize}
21 alt={photo.alt}
22 class="absolute inset-0 w-full h-full object-contain"
23 />
24 </div>
25 <form
26 hx-put={`/actions/photo/${new AtUri(photo.uri).rkey}`}
27 _="on htmx:afterOnLoad trigger closeDialog"
28 >
29 <div class="my-2">
30 <Label htmlFor="alt">Descriptive alt text</Label>
31 <Textarea
32 id="alt"
33 name="alt"
34 rows={4}
35 defaultValue={photo.alt}
36 placeholder="Alt text"
37 autoFocus
38 class="dark:bg-zinc-800 dark:text-white"
39 />
40 </div>
41 <div class="w-full flex flex-col gap-2 mt-2">
42 <Button type="submit" variant="primary" class="w-full">
43 Save
44 </Button>
45 <Dialog.Close variant="secondary" class="w-full">
46 Close
47 </Dialog.Close>
48 </div>
49 </form>
50 </Dialog.Content>
51 </Dialog>
52 );
53}