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 { getOrderedExifData } from "../lib/photo.ts";
3import { Dialog } from "./Dialog.tsx";
4
5export function PhotoExifDialog({
6 photo,
7}: Readonly<{
8 photo: PhotoView;
9}>) {
10 return (
11 <Dialog id="photo-alt-dialog">
12 <Dialog.Content>
13 <Dialog.X class="fill-zinc-950 dark:fill-zinc-50" />
14 <Dialog.Title>Camera Settings</Dialog.Title>
15 <div class="aspect-square relative">
16 <img
17 src={photo.fullsize}
18 alt={photo.alt}
19 class="absolute inset-0 w-full h-full object-contain"
20 />
21 </div>
22 {photo.exif && (
23 <div className="mt-4 text-sm space-y-1">
24 {getOrderedExifData(photo).map(({ displayKey, value }) => (
25 <div key={displayKey} className="flex justify-between gap-4">
26 <dt className="font-medium">{displayKey}</dt>
27 <dd className="text-right max-w-[60%] break-words">
28 {String(value)}
29 </dd>
30 </div>
31 ))}
32 </div>
33 )}
34 <Dialog.Close variant="secondary" class="w-full mt-4">
35 Close
36 </Dialog.Close>
37 </Dialog.Content>
38 </Dialog>
39 );
40}