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 { profileLink } from "../utils.ts";
3import { ActorAvatar } from "./ActorAvatar.tsx";
4
5export function FollowsList(
6 { profiles }: Readonly<{ profiles: ProfileView[] }>,
7) {
8 return (
9 <ul class="space-y-4 relative divide-zinc-200 dark:divide-zinc-800 divide-y">
10 {profiles.length === 0
11 ? (
12 <li>
13 Not following anyone yet.
14 </li>
15 )
16 : (
17 profiles.map((profile) => (
18 <li key={profile.did} class="pb-4">
19 <a
20 href={profileLink(profile.handle)}
21 class="flex items-center"
22 >
23 <div class="flex flex-col space-y-2">
24 <div class="flex items-center">
25 <ActorAvatar profile={profile} size={32} class="mr-2" />
26 <div class="flex flex-col">
27 <p>{profile.displayName}</p>
28 <p class="text-zinc-600 dark:text-zinc-500">
29 @{profile.handle || profile.displayName}
30 </p>
31 </div>
32 </div>
33 <p>{profile.description}</p>
34 </div>
35 </a>
36 </li>
37 ))
38 )}
39 </ul>
40 );
41}