68 lines
2.2 KiB
TypeScript
68 lines
2.2 KiB
TypeScript
/* 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 content-center text-center cursor-default`} style={{
|
|
rotate: `${360 - rotation}deg`,
|
|
backgroundColor: guest.color,
|
|
}}>
|
|
{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} />}
|
|
</>
|
|
)
|
|
} |