grain.social
grain.social is a photo sharing platform built on atproto.
chadtmiller.com
1import { ProfileView } from "$lexicon/types/social/grain/actor/defs.ts";
2import { Un$Typed } from "$lexicon/util.ts";
3import { ActorAvatar } from "./ActorAvatar.tsx";
4
5export function AvatarInput(
6 { profile }: Readonly<{ profile?: Un$Typed<ProfileView> }>,
7) {
8 return (
9 <label htmlFor="file">
10 <span class="sr-only">Upload avatar</span>
11 <div class="border rounded-full border-zinc-900 w-16 h-16 mx-auto mb-2 relative my-2 cursor-pointer">
12 <div class="absolute bottom-0 right-0 bg-zinc-800 rounded-full w-5 h-5 flex items-center justify-center z-10">
13 <i class="fa-solid fa-camera text-white text-xs"></i>
14 </div>
15 <div id="image-preview" class="w-full h-full">
16 {profile ? <ActorAvatar profile={profile} size={64} /> : null}
17 </div>
18 </div>
19 <input
20 class="hidden"
21 type="file"
22 id="file"
23 name="file"
24 accept="image/*"
25 _="on change call Grain.profileDialog.handleAvatarImageSelect(me)"
26 />
27 </label>
28 );
29}