Token Icon Group

1import { TokenIcon } from "@/registry/sol/token-icon";
2import { cn } from "@/lib/utils";
3 
4interface TokenIconGroupProps {
5  tokens: { src: string; alt?: string }[];
6  size?: number;
7  overlap?: number;
8  max?: number;
9  className?: string;
10}
11 
12const TokenIconGroup = ({
13  tokens,
14  size = 24,
15  overlap = -10,
16  max = 4,
17  className,
18}: TokenIconGroupProps) => {
19  const visible = tokens.slice(0, max);
20  const remaining = tokens.length - max;
21  const hasOverlap = visible.length > 1 || remaining > 0;
22 
23  return (
24    <div className={cn("flex items-center", className)}>
25      {visible.map((token, i) => (
26        <div
27          key={`${token.src}-${i}`}
28          className={cn(
29            "rounded-full relative leading-[0]",
30            hasOverlap && "ring-2 ring-background",
31          )}
32          style={{
33            marginLeft: i === 0 ? 0 : overlap,
34            zIndex: visible.length + 1 - i,
35          }}
36        >
37          <TokenIcon
38            src={token.src}
39            alt={token.alt ?? "Token"}
40            width={size}
41            height={size}
42          />
43        </div>
44      ))}
45      {remaining > 0 && (
46        <div
47          className="relative flex items-center justify-center rounded-full bg-muted text-muted-foreground ring-2 ring-background font-medium"
48          style={{
49            width: size,
50            height: size,
51            marginLeft: overlap,
52            fontSize: size * 0.35,
53            zIndex: visible.length + 2,
54          }}
55        >
56          +{remaining}
57        </div>
58      )}
59    </div>
60  );
61};
62 
63export type { TokenIconGroupProps };
64export { TokenIconGroup };