grain.social
grain.social is a photo sharing platform built on atproto.
chadtmiller.com
1import { GalleryView } from "$lexicon/types/social/grain/gallery/defs.ts";
2import { AtUri } from "@atproto/syntax";
3import { cn } from "@bigmoves/bff/components";
4import { publicGalleryLink } from "../utils.ts";
5import { Button } from "./Button.tsx";
6import { Dialog } from "./Dialog.tsx";
7
8export function ShareGalleryDialog({ gallery }: Readonly<{
9 gallery: GalleryView;
10}>) {
11 const publicLink = publicGalleryLink(
12 gallery.creator.handle,
13 gallery.uri,
14 );
15 const intentLink = `https://bsky.app/intent/compose?text=${
16 encodeURIComponent(
17 "Check out this gallery on @grain.social \n" +
18 publicLink,
19 )
20 }`;
21 return (
22 <Dialog>
23 <Dialog.Content class="gap-4">
24 <Dialog.Title>Share gallery</Dialog.Title>
25 <Dialog.X class="fill-zinc-950 dark:fill-zinc-50" />
26 <ul class="divide-y divide-zinc-200 dark:divide-zinc-800 border-t border-b border-zinc-200 dark:border-zinc-800">
27 <li class="w-full hover:bg-zinc-200 dark:hover:bg-zinc-800">
28 <a
29 href={intentLink}
30 target="_blank"
31 rel="noopener noreferrer"
32 class="flex gap-2 justify-start items-center text-left w-full px-2 py-4 cursor-pointer"
33 >
34 <i class="fa-brands fa-bluesky" />
35 Share to Bluesky
36 </a>
37 </li>
38 <li class="w-full hover:bg-zinc-200 dark:hover:bg-zinc-800">
39 <button
40 type="button"
41 class="flex gap-2 justify-start items-center text-left w-full px-2 py-4 cursor-pointer"
42 _={`on click call Grain.utils.copyToClipboard("${publicLink}")`}
43 >
44 <i class="fa-solid fa-link"></i>
45 Copy link
46 </button>
47 </li>
48 </ul>
49 <Dialog.Close variant="secondary">Close</Dialog.Close>
50 </Dialog.Content>
51 </Dialog>
52 );
53}
54
55export function ShareGalleryDialogButton(
56 { class: classProp, gallery }: Readonly<
57 { class?: string; gallery: GalleryView }
58 >,
59) {
60 const rkey = new AtUri(gallery.uri).rkey;
61 return (
62 <Button
63 variant="secondary"
64 class={cn("whitespace-nowrap", classProp)}
65 hx-get={`/dialogs/${gallery.creator.did}/gallery/${rkey}/share`}
66 hx-trigger="click"
67 hx-target="#dialog-target"
68 hx-swap="innerHTML"
69 >
70 <i class="fa-solid fa-arrow-up-from-bracket mr-2" />
71 Share
72 </Button>
73 );
74}