slices.network
Highly ambitious ATProtocol AppView service and sdks
chadtmiller.com
add new frontend client using graphql and relay, get graphql schema at feature parity with the xrpc endpoints
1import { Avatar } from "./Avatar.tsx";
2import { cn } from "../utils/cn.ts";
3
4interface WaitlistRequest {
5 profile?: {
6 handle?: string;
7 avatar?: {
8 url?: string;
9 } | null;
10 } | null;
11}
12
13interface AvatarStackProps {
14 requests: WaitlistRequest[];
15 maxDisplay?: number;
16 size?: number;
17 className?: string;
18}
19
20export function AvatarStack({
21 requests,
22 maxDisplay = 20,
23 size = 24,
24 className,
25}: AvatarStackProps) {
26 const displayedRequests = requests.slice(0, maxDisplay);
27 const overlapClass = size === 32 ? "-ml-2.5" : "-ml-2";
28
29 return (
30 <div className={cn("flex justify-center", className)}>
31 {displayedRequests.map((request, index) => {
32 const avatarSrc = request.profile?.avatar?.url;
33 const handle = request.profile?.handle || "user";
34
35 return (
36 <div
37 key={index}
38 className={cn(
39 "relative transition-transform duration-200 hover:scale-110 hover:z-10",
40 index > 0 && overlapClass
41 )}
42 >
43 <div className="border-2 border-zinc-900 hover:border-blue-500 transition-colors duration-200 rounded-full">
44 <Avatar
45 src={avatarSrc}
46 alt={handle}
47 size="sm"
48 />
49 </div>
50 </div>
51 );
52 })}
53 </div>
54 );
55}