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

Render rounded tables #78

Merged
bustikiller merged 1 commits from round-tables into main 2024-11-03 07:42:08 +00:00
Conversation 0 Commits 1 Files Changed 2 +49 -17
2 changed files with 49 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit efbc27a499 - Show all commits

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> <h1 className={`${lusitana.className} text-2xl my-5`}>Table distributions</h1>
<div className="flex flex-row flex-wrap justify-around"> <div className="flex flex-row flex-wrap justify-around">
{tables.map((table) => ( {tables.map((table) => (
<Table key={table.number} guests={table.guests || []} /> <Table key={table.number} guests={table.guests || []} style="rounded" />
))} ))}
</div> </div>
</div> </div>

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

@ -2,24 +2,25 @@
import { Guest } from "@/app/lib/definitions"; import { Guest } from "@/app/lib/definitions";
function Dish({ guest, rotation }: { guest: Guest, rotation?: number }) {
function GuestRow({ guests }: { guests: Guest[] }) { rotation = rotation || 0
return (<div className="justify-around flex flex-row">
{
guests.map((guest) => {
return ( 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} {guest.name}
</div> </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 halfwayThrough = Math.floor(guests.length / 2)
const arrayFirstHalf = guests.slice(0, halfwayThrough); const arrayFirstHalf = guests.slice(0, halfwayThrough);
const arraySecondHalf = guests.slice(halfwayThrough, guests.length); const arraySecondHalf = guests.slice(halfwayThrough, guests.length);
@ -31,3 +32,34 @@ export function Table({ guests }: { guests: Guest[] }) {
</div> </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} />}
</>
)
}