wedding-planner-frontend/app/ui/guests/table.tsx

/* Copyright (C) 2024 Manuel Bustillo*/

'use client';

import { destroyGuest, updateGuest } from '@/app/api/guests';
import { Guest, GuestStatus } from '@/app/lib/definitions';
import { classNames } from '@/app/ui/components/button';
import { PencilIcon, TrashIcon } from '@heroicons/react/24/outline';
import clsx from 'clsx';
import TableOfContents from '../components/table-of-contents';

export default function guestsTable({ guests, onUpdate, onEdit }: {
  guests: Guest[],
  onUpdate: () => void,
  onEdit: (guest: Guest) => void
}) {
  return (
    <TableOfContents
      headers={['Name', 'Group', 'Status', 'Actions']}
      caption='Guests'
      elements={guests}
      rowRender={(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">
          <td scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
            {guest.name}
          </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',
                  'bg-yellow-400': guest.status === 'tentative',
                }
              )}>
              </span>
              {guest.status}
            </span>
          </td>
          <td>
            <div className="flex flex-row items-center">
              <TrashIcon className='size-6 cursor-pointer' onClick={() => { destroyGuest(guest, () => onUpdate()) }} />
              <PencilIcon className='size-6 cursor-pointer' onClick={() => onEdit(guest)} />
            </div>
          </td>
        </tr>
      )}
    />
  );
}