Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | 95x 95x 33x 62x | interface RankedListItemProps {
rank: number;
label: string;
value: string;
href?: string;
}
export function RankedListItem({
rank,
label,
value,
href,
}: RankedListItemProps) {
const content = (
<>
<div className="flex items-center gap-3">
<div className="flex items-center justify-center w-6 h-6 rounded-full bg-background-muted text-xs font-semibold text-foreground-muted">
{rank}
</div>
<span className="text-sm font-medium text-foreground-default truncate capitalize">
{label}
</span>
</div>
<span className="text-sm text-foreground-muted">{value}</span>
</>
);
if (href) {
return (
<a
href={href}
className="flex items-center justify-between pb-3 border-b border-border-default last:border-0 hover:bg-background-muted -mx-2 px-2 py-1 rounded transition-colors"
>
{content}
</a>
);
}
return (
<div className="flex items-center justify-between pb-3 border-b border-border-default last:border-0">
{content}
</div>
);
}
|