an app to share curated trails
sidetrail.app
atproto
nextjs
react
rsc
1import { loadTrailActiveWalkers } from "../data/queries";
2import { FloatingAvatar } from "./FloatingAvatar";
3
4export async function TrailCardWalkers({ trailUri }: { trailUri: string }) {
5 const walkers = await loadTrailActiveWalkers(trailUri);
6 const displayWalkers = walkers.filter((w) => w.avatar).slice(0, 3);
7
8 if (displayWalkers.length === 0) return null;
9
10 return (
11 <div className="TrailCard-walkers">
12 {displayWalkers.map((walker, i) => {
13 return (
14 <FloatingAvatar
15 key={i}
16 src={walker.avatar}
17 title={walker.handle}
18 contained={true}
19 opaque={true}
20 handle={walker.handle}
21 noLink
22 />
23 );
24 })}
25 </div>
26 );
27}