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

/* Copyright (C) 2024 Manuel Bustillo*/

import { Guest } from "@/app/lib/definitions";

function Dish({ guest, rotation }: { guest: Guest, rotation?: number }) {
    rotation = rotation || 0
    return (
        <div className={`m-3 w-24 h-24 rounded-full bg-cyan-100 content-center text-center cursor-default`} style={{ rotate: `${360 - rotation}deg` }}>
            {guest.name}
        </div>
    )
}


function GuestRow({ guests }: { guests: Guest[] }) {
    return (
        <div className="justify-around flex flex-row">
            {guests.map((guest) => <Dish key={guest.id} guest={guest} />)}
        </div>
    )
}

function RectangularTable({ guests }: { guests: Guest[] }) {
    const halfwayThrough = Math.floor(guests.length / 2)
    const arrayFirstHalf = guests.slice(0, halfwayThrough);
    const arraySecondHalf = guests.slice(halfwayThrough, guests.length);

    return (
        <div className="m-12 h-64 bg-cyan-800 flex flex-col justify-between">
            <GuestRow guests={arrayFirstHalf} />
            <GuestRow guests={arraySecondHalf} />
        </div>
    )
}

function RoundedTable({ guests }: { guests: Guest[] }) {
    const size = 500
    const rotation = 360 / guests.length
    return (
        <div className={`m-12 rounded-full bg-cyan-800 relative z-0`} style={{ width: `${size}px`, height: `${size}px` }}>
            {
                guests.map((guest, index) => {
                    return (
                        <div key={guest.id} className={`border-dashed grid justify-items-center absolute inset-0`} style={{
                            rotate: `${index * rotation}deg`,
                            height: `${size}px`,
                            width: `${size}px`,
                        }}>
                            <Dish guest={guest} rotation={index * rotation} />
                        </div>
                    )
                })
            }
        </div>
    )
}

export function Table({ guests, style }: { guests: Guest[], style: "rectangular" | "rounded" }) {
    return (
        <>
            {style === "rectangular" && <RectangularTable guests={guests} />}
            {style === "rounded" && <RoundedTable guests={guests} />}
        </>
    )
}