app/ui/arrangements/arrangement.tsx

@@ -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>

app/ui/components/table.tsx

@@ -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) => {
-
-                return (
-                    <div className="m-3 w-24 h-24 rounded-full bg-cyan-100 hover:bg-cyan-200 content-center text-center">
-                        {guest.name}
-                    </div>
-                )
-            })
-        }
-
-    </div>)
+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>
+    )
 }
 
-export function Table({ guests }: { guests: Guest[] }) {
+
+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);
@@ -30,4 +31,35 @@ export function Table({ guests }: { guests: Guest[] }) {
             <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} />}
+        </>
+    )
 }