The Coline design system: accessible React components for Coline Apps, themed live by the host workspace, and for Coline Sites in light and dark. Tailwind v4 stylesheet included. MIT.
| 5 |
| export function PropertyList({ |
| 6 | items, |
| 7 | columns = 1, |
| 8 | className, |
| 9 | }: { |
| 10 | items: Array<{ label: React.ReactNode; value: React.ReactNode; hidden?: boolean }>; |
| 11 | columns?: 1 | 2; |
| 12 | className?: string; |
| 13 | }) { |
| 14 | return ( |
| 15 | <dl className={cn("grid gap-x-8", columns === 2 ? "sm:grid-cols-2" : "grid-cols-1", className)}> |
| 16 | {items |
| 17 | .filter((item) => !item.hidden) |
| 18 | .map((item, index) => ( |
| 19 | <div |
| 20 | key={index} |
| 21 | className="flex min-w-0 items-baseline justify-between gap-4 border-b border-border/50 py-2.5 last:border-b-0" |
| 22 | > |
| 23 | <dt className="shrink-0 text-sm text-muted-foreground">{item.label}</dt> |
| 24 | <dd className="min-w-0 truncate text-right text-sm font-medium text-foreground">{item.value}</dd> |
| 25 | </div> |
| 26 | ))} |
| 27 | </dl> |
| 28 | ); |
| 29 | } |
| 30 |