89 lines
3.0 KiB
TypeScript
89 lines
3.0 KiB
TypeScript
'use client'
|
|
|
|
import { Guest } from '@/app/lib/definitions';
|
|
import SkeletonRow from './skeleton-row';
|
|
import { Suspense } from 'react';
|
|
import clsx from 'clsx';
|
|
|
|
export function TableHeader() {
|
|
|
|
}
|
|
|
|
export default async function guestsTable() {
|
|
|
|
let guests: Guest[] = await fetch("http://localhost:3001/guests.json")
|
|
.then((response) => response.json())
|
|
.then((data) => {
|
|
return data.data.map((record: any) => {
|
|
return ({
|
|
id: record.id,
|
|
name: record.attributes.name,
|
|
email: record.attributes.email,
|
|
group_name: record.attributes.group_name,
|
|
status: record.attributes.status
|
|
});
|
|
});
|
|
}, (error) => {
|
|
return [];
|
|
});
|
|
|
|
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">
|
|
Guests
|
|
<p className="mt-1 text-sm font-normal text-gray-500 dark:text-gray-400">
|
|
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">
|
|
Email
|
|
</th>
|
|
<th scope="col" className="px-6 py-3">
|
|
Group
|
|
</th>
|
|
<th scope="col" className="px-6 py-3">
|
|
Status
|
|
</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">
|
|
<th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
|
{guest.name}
|
|
</th>
|
|
<td className="px-6 py-4">
|
|
{guest.email}
|
|
</td>
|
|
<td className="px-6 py-4">
|
|
{guest.group_name}
|
|
</td>
|
|
<td className="px-6 py-4">
|
|
<span className="flex items-center text-sm dark:text-white me-3">
|
|
<span className={clsx(
|
|
'flex w-2.5 h-2.5 rounded-full me-1.5 flex-shrink-0',
|
|
{
|
|
'bg-gray-400': guest.status === 'Considered',
|
|
'bg-blue-400': guest.status === 'Invited',
|
|
'bg-green-600': guest.status === 'Confirmed',
|
|
'bg-red-400': guest.status === 'Declined',
|
|
}
|
|
)}>
|
|
</span>
|
|
{guest.status}
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
);
|
|
}
|