e.xyehr.cn
forked from
standard.site/standard.site
Standard.site landing page built in Next.js
brookie.blog
1import { ReactNode } from 'react'
2
3interface TableProps {
4 headers: string[]
5 rows: (string | ReactNode)[][]
6}
7
8export function Table({ headers, rows }: TableProps) {
9 const columnCount = headers.length
10
11 return (
12 <div className="overflow-x-auto mb-6">
13 <table className="w-full text-base border-collapse table-fixed">
14 <colgroup>
15 {columnCount === 3 ? (
16 <>
17 <col className="w-1/4" />
18 <col className="w-[15%]" />
19 <col />
20 </>
21 ) : columnCount === 4 ? (
22 <>
23 <col className="w-1/4" />
24 <col className="w-1/6" />
25 <col className="w-1/6" />
26 <col />
27 </>
28 ) : (
29 headers.map((_, i) => <col key={i} />)
30 )}
31 </colgroup>
32 <thead>
33 <tr>
34 {headers.map((header, i) => (
35 <th
36 key={i}
37 className="text-left font-medium text-base-content border-b border-border px-3 py-2"
38 >
39 {header}
40 </th>
41 ))}
42 </tr>
43 </thead>
44 <tbody>
45 {rows.map((row, i) => (
46 <tr key={i}>
47 {row.map((cell, j) => (
48 <td
49 key={j}
50 className={`text-muted border-b border-border px-3 py-2 ${j === 0 ? 'font-mono text-sm break-all' : ''
51 }`}
52 >
53 {cell}
54 </td>
55 ))}
56 </tr>
57 ))}
58 </tbody>
59 </table>
60 </div>
61 )
62}