Something went wrong. Try again.
Monorepo for Tangled tangled.org
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142import { Row } from "./layout";import { Chip } from "./chip";import { COLORS, TYPOGRAPHY } from "./constants";
interface LabelPillProps { name: string; color: string;}
function LabelPill({ name, color }: LabelPillProps) { return ( <Chip> <div style={{ width: 20, height: 20, borderRadius: "50%", backgroundColor: color, }} /> <span style={{ ...TYPOGRAPHY.body, color: COLORS.text }}>{name}</span> </Chip> );}
interface LabelListProps { labels: Array<{ name: string; color: string }>; max?: number;}
export function LabelList({ labels, max = 5 }: LabelListProps) { if (labels.length === 0) return null;
return ( <Row style={{ gap: 16 }}> {labels.slice(0, max).map((label, i) => ( <LabelPill key={i} name={label.name} color={label.color} /> ))} </Row> );}