wedding-planner-frontend/app/ui/components/table-of-contents.tsx

/* 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>
    )
}