Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
1.1 kB · 49 lines
TSX
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950import { Row } from "./layout";import { COLORS, TYPOGRAPHY } from "./constants";
interface LabelPillProps { name: string; color: string;}
function LabelPill({ name, color }: LabelPillProps) { return ( <Row style={{ gap: 16, padding: "16px 28px", borderRadius: 18, backgroundColor: "#fff", border: `4px solid ${COLORS.label.border}`, }}> <div style={{ width: 24, height: 24, borderRadius: "50%", backgroundColor: color, }} /> <span style={{ ...TYPOGRAPHY.body, color: COLORS.label.text }}> {name} </span> </Row> );}
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: 12 }}> {labels.slice(0, max).map((label, i) => ( <LabelPill key={i} name={label.name} color={label.color} /> ))} </Row> );}