danabra.mov
forked from
slices.network/slices
Highly ambitious ATProtocol AppView service and sdks
chadtmiller.com
1import { ActorAvatar } from "./ActorAvatar.tsx";
2import { Text } from "./Text.tsx";
3
4interface AvatarInputProps {
5 profile?: {
6 displayName?: string;
7 description?: string;
8 avatar?: string;
9 handle?: string;
10 };
11}
12
13export function AvatarInput({ profile }: AvatarInputProps) {
14 return (
15 <div>
16 <Text as="label" size="sm" variant="label" className="block font-medium mb-2">
17 Avatar
18 </Text>
19 <label htmlFor="avatar" className="cursor-pointer">
20 <div className="border rounded-full border-zinc-300 dark:border-zinc-600 w-16 h-16 mb-2 relative hover:border-zinc-400 dark:hover:border-zinc-500 transition-colors">
21 <div className="absolute bottom-0 right-0 bg-zinc-800 dark:bg-zinc-700 rounded-full w-5 h-5 flex items-center justify-center z-10">
22 <svg
23 className="w-3 h-3 text-white"
24 fill="currentColor"
25 viewBox="0 0 20 20"
26 >
27 <path
28 fillRule="evenodd"
29 d="M4 5a2 2 0 00-2 2v8a2 2 0 002 2h12a2 2 0 002-2V7a2 2 0 00-2-2h-1.586a1 1 0 01-.707-.293l-1.121-1.121A2 2 0 0011.172 3H8.828a2 2 0 00-1.414.586L6.293 4.707A1 1 0 015.586 5H4zm6 9a3 3 0 100-6 3 3 0 000 6z"
30 clipRule="evenodd"
31 />
32 </svg>
33 </div>
34 <div
35 id="image-preview"
36 className="w-full h-full rounded-full overflow-hidden"
37 >
38 {profile
39 ? (
40 <ActorAvatar
41 profile={profile}
42 size={64}
43 className="w-full h-full"
44 />
45 )
46 : (
47 <div className="w-full h-full bg-zinc-100 dark:bg-zinc-800 flex items-center justify-center">
48 <svg
49 className="w-8 h-8 text-zinc-400 dark:text-zinc-500"
50 fill="currentColor"
51 viewBox="0 0 20 20"
52 >
53 <path
54 fillRule="evenodd"
55 d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
56 clipRule="evenodd"
57 />
58 </svg>
59 </div>
60 )}
61 </div>
62 </div>
63 </label>
64 <input
65 type="file"
66 id="avatar"
67 name="avatar"
68 accept="image/*"
69 className="hidden"
70 /* @ts-ignore - Hyperscript attribute */
71 _="on change
72 if my.files.length > 0
73 set file to my.files[0]
74 call URL.createObjectURL(file)
75 set imageUrl to the result
76 put `<img src='${imageUrl}' class='w-full h-full object-cover rounded-full' alt='Avatar preview' />` into #image-preview
77 end"
78 />
79 </div>
80 );
81}