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

Render rounded tables
All checks were successful
Check usage of free licenses / build-static-assets (pull_request) Successful in 29s
Details
Add copyright notice / copyright_notice (pull_request) Successful in 47s
Details
Playwright Tests / test (pull_request) Successful in 6m50s
Details
Build Nginx-based docker image / build-static-assets (pull_request) Successful in 7m50s
Details

Browse Source
This commit is contained in:
Manuel Bustillo 2024-11-03 08:18:24 +01:00
parent b36bb51fd7
commit 937fcab91a
2 changed files with 50 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/ui/arrangements/arrangement.tsx
View File

@ -34,7 +34,7 @@ export default function Arrangement({ id }: { id: string }) {
<h1 className={`${lusitana.className} text-2xl my-5`}>Table distributions</h1>
<div className="flex flex-row flex-wrap justify-around">
{tables.map((table) => (
<Table key={table.number} guests={table.guests || []} />
<Table key={table.number} guests={table.guests || []} style="rounded" />
))}
</div>
</div>

53
app/ui/components/table.tsx
View File

@ -2,24 +2,25 @@
import { Guest } from "@/app/lib/definitions";
function GuestRow({ guests }: { guests: Guest[] }) {
return (<div className="justify-around flex flex-row">
{
guests.map((guest) => {
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 hover:bg-cyan-200 content-center text-center">
<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>
)
})
}
</div>)
function GuestRow({ guests }: { guests: Guest[] }) {
return (
<div className="justify-around flex flex-row">
{guests.map((guest) => <Dish key={guest.id} guest={guest} />)}
</div>
)
}
export function Table({ guests }: { guests: Guest[] }) {
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);
@ -31,3 +32,35 @@ export function Table({ guests }: { guests: Guest[] }) {
</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`,
zIndex: 10 * (1 + index),
}}>
<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} />}
</>
)
}