grain.social is a photo sharing platform built on atproto.
grain.social
1import { PhotoView } from "$lexicon/types/social/grain/photo/defs.ts";
2import { AtUri } from "@atproto/syntax";
3
4export function PhotoSelectButton({
5 galleryUri,
6 photo,
7}: Readonly<{
8 galleryUri: string;
9 photo: PhotoView;
10}>) {
11 const galleryRkey = new AtUri(galleryUri).rkey;
12 const photoRkey = new AtUri(photo.uri).rkey;
13 return (
14 <button
15 hx-put={`/actions/gallery/${galleryRkey}/remove-photo/${photoRkey}?selectedGallery=${
16 galleryUri ?? ""
17 }`}
18 hx-swap="none"
19 hx-confirm="Are you sure you want to remove this photo from the gallery?"
20 type="button"
21 class="group cursor-pointer aspect-square relative"
22 _={`on htmx:afterOnLoad remove me`}
23 >
24 <div class="absolute top-2 right-2 z-30 size-4 bg-zinc-950/50 flex items-center justify-center">
25 <i class="fa-close fa-solid text-white z-10" />
26 </div>
27 <img
28 src={photo.fullsize}
29 alt={photo.alt}
30 class="w-full h-full object-cover"
31 loading="lazy"
32 />
33 </button>
34 );
35}