bustikiller/wedding-planner-frontend
1
0
Fork 0
Code Issues 1 Pull Requests 13 Actions Packages Projects Releases Wiki Activity

Extract a common TableOfContents component #91

Merged
bustikiller merged 3 commits from extract-table-component into main 2024-11-10 20:31:25 +00:00
Conversation 0 Commits 3 Files Changed 3 +45 -65
1 changed files with 45 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 2ea1fd2667 - Show all commits

36
app/ui/guests/table.tsx
View File

@ -7,6 +7,7 @@ import React, { useState, useEffect } from 'react';
import { Guest } from '@/app/lib/definitions'; import { Guest } from '@/app/lib/definitions';
import { getCsrfToken } from '@/app/lib/utils'; import { getCsrfToken } from '@/app/lib/utils';
import {classNames} from '@/app/ui/components/button'; import {classNames} from '@/app/ui/components/button';
import TableOfContents from '../components/table-of-contents';
export default function guestsTable() { export default function guestsTable() {
const [guests, setGuests] = useState<Array<Guest>>([]); const [guests, setGuests] = useState<Array<Guest>>([]);
@ -50,30 +51,11 @@ export default function guestsTable() {
guests.length === 0 && loadGuests(); guests.length === 0 && loadGuests();
return ( return (
<div className="w-full relative overflow-x-auto shadow-md sm:rounded-lg"> <TableOfContents
<table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400"> headers={['Name', 'Group', 'Status', 'Actions']}
<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='Guests'
Guests elements={guests}
<p className="mt-1 text-sm font-normal text-gray-500 dark:text-gray-400"> rowRender={(guest) => (
There are {guests.length} guests 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>
<th scope="col" className="px-6 py-3">
Name
</th>
<th scope="col" className="px-6 py-3">
Group
</th>
<th scope="col" className="px-6 py-3">
Status
</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{guests.map((guest) => (
<tr key={guest.id} className="bg-white border-b odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800"> <tr key={guest.id} className="bg-white border-b odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800">
<th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"> <th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
{guest.name} {guest.name}
@ -110,9 +92,7 @@ export default function guestsTable() {
)} )}
</td> </td>
</tr> </tr>
))} )}
</tbody> />
</table>
</div>
); );
} }