an app to share curated trails
sidetrail.app
1import "./HomeTabBadges.css";
2
3interface HomeTabBadgesProps {
4 items: Array<{ accentColor: string; key: string }>;
5 maxVisible?: number;
6}
7
8export function HomeTabBadges({ items, maxVisible = 3 }: HomeTabBadgesProps) {
9 if (items.length === 0) {
10 return null;
11 }
12 return (
13 <span className="HomeTabBadges">
14 {items.slice(0, maxVisible).map((item, idx) => (
15 <span
16 key={item.key}
17 className="HomeTabBadges-badge"
18 style={{
19 backgroundColor: item.accentColor,
20 zIndex: items.length - idx,
21 }}
22 />
23 ))}
24 </span>
25 );
26}