29 lines
1.4 KiB
TypeScript
29 lines
1.4 KiB
TypeScript
/* Copyright (C) 2024 Manuel Bustillo*/
|
|
|
|
export default function TableOfContents<Type>({ headers, caption, elements, rowRender }: { headers: string[], caption: string, elements: Type[], rowRender: (element: Type) => JSX.Element }) {
|
|
return (
|
|
<div className="w-full relative overflow-x-auto shadow-md sm:rounded-lg">
|
|
<table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
|
|
<caption className="p-5 text-lg font-semibold text-left rtl:text-right text-gray-900 bg-white dark:text-white dark:bg-gray-800">
|
|
{caption}
|
|
<p className="mt-1 text-sm font-normal text-gray-500 dark:text-gray-400">
|
|
There are {elements.length} elements in the list
|
|
</p>
|
|
</caption>
|
|
<thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
|
|
<tr>
|
|
{headers.map((header) => (
|
|
<th scope="col" className="px-6 py-3">
|
|
{header}
|
|
</th>
|
|
))}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{elements.map((element) => rowRender(element))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)
|
|
}
|