Display the dish with the color of the group

app/lib/definitions.ts

@@ -22,6 +22,7 @@ export type Guest = {
   id: string;
   name: string;
   group_name?: string;
+  color?: string;
   status?: 'Considered' | 'Invited' | 'Confirmed' | 'Declined' | 'Tentative';
 }
 

app/ui/components/table.tsx

@@ -5,7 +5,10 @@ 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` }}>
+        <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>
     )