33 lines
1.3 KiB
JavaScript
33 lines
1.3 KiB
JavaScript
import React from 'react'
|
|
|
|
export default function DocsComparisonTable({ columns, rows, caption }) {
|
|
return (
|
|
<div className="overflow-hidden rounded-[28px] border border-white/10 bg-black/20">
|
|
<div className="overflow-x-auto">
|
|
<table className="min-w-full border-collapse text-left">
|
|
{caption ? <caption className="sr-only">{caption}</caption> : null}
|
|
<thead>
|
|
<tr className="border-b border-white/10 bg-white/[0.04]">
|
|
{columns.map((column) => (
|
|
<th key={column.key} scope="col" className="px-4 py-3 text-xs font-semibold uppercase tracking-[0.16em] text-slate-300 first:min-w-[180px]">
|
|
{column.label}
|
|
</th>
|
|
))}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{rows.map((row) => (
|
|
<tr key={row.id} className="border-b border-white/5 last:border-b-0">
|
|
{columns.map((column, index) => (
|
|
<td key={`${row.id}-${column.key}`} className={`px-4 py-4 align-top text-sm leading-6 ${index === 0 ? 'font-semibold text-white' : 'text-slate-300'}`}>
|
|
{row[column.key]}
|
|
</td>
|
|
))}
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
)
|
|
} |