compare-table.tsx54 lines · main

1	interface CompareRow {
2	feature: string;
3	briven: string;
4	other: string;
5	note?: string;
6	}
7
8	export function CompareTable({ rows, otherName }: { rows: CompareRow[]; otherName: string }) {
9	return (
10	<div className="overflow-hidden rounded-[var(--radius-md)] border border-[var(--color-border-subtle)]">
11	<div className="grid grid-cols-1 sm:grid-cols-[1fr_1.2fr_1.2fr]">
12	<div className="border-b border-[var(--color-border-subtle)] px-4 py-3 font-mono text-[10px] uppercase tracking-wider text-[var(--color-text-subtle)] sm:border-r">
13	feature
14	</div>
15	<div className="border-b border-[var(--color-border-subtle)] px-4 py-3 font-mono text-[10px] uppercase tracking-wider text-[var(--color-primary)] sm:border-r">
16	briven
17	</div>
18	<div className="border-b border-[var(--color-border-subtle)] px-4 py-3 font-mono text-[10px] uppercase tracking-wider text-[var(--color-text-muted)]">
19	{otherName}
20	</div>
21
22	{rows.map((row, i) => (
23	<Row key={row.feature} row={row} isLast={i === rows.length - 1} />
24	))}
25	</div>
26	</div>
27	);
28	}
29
30	function Row({ row, isLast }: { row: CompareRow; isLast: boolean }) {
31	const border = isLast ? '' : 'border-b border-[var(--color-border-subtle)]';
32	return (
33	<>
34	<div
35	className={`${border} bg-[var(--color-surface)] px-4 py-4 font-mono text-xs text-[var(--color-text)] sm:border-r`}
36	>
37	{row.feature}
38	{row.note ? (
39	<p className="mt-1 font-mono text-[10px] text-[var(--color-text-subtle)]">{row.note}</p>
40	) : null}
41	</div>
42	<div
43	className={`${border} px-4 py-4 font-mono text-xs leading-[1.6] text-[var(--color-text)] sm:border-r`}
44	>
45	{row.briven}
46	</div>
47	<div
48	className={`${border} px-4 py-4 font-mono text-xs leading-[1.6] text-[var(--color-text-muted)]`}
49	>
50	{row.other}
51	</div>
52	</>
53	);
54	}