From 58b02839f2c406953bb3459e3f4d8589020ef4fb Mon Sep 17 00:00:00 2001
From: Manuel Bustillo <bustikiller@bustikiller.com>
Date: Fri, 1 Nov 2024 18:25:00 +0100
Subject: [PATCH] Basic definition of a table component

---
 app/dashboard/tables/page.tsx | 53 +++++++++++++++++++++++++++++++++--
 app/lib/definitions.ts        |  6 ++--
 app/ui/components/table.tsx   | 31 ++++++++++++++++++++
 3 files changed, 84 insertions(+), 6 deletions(-)
 create mode 100644 app/ui/components/table.tsx

diff --git a/app/dashboard/tables/page.tsx b/app/dashboard/tables/page.tsx
index 2aec187..29a1d76 100644
--- a/app/dashboard/tables/page.tsx
+++ b/app/dashboard/tables/page.tsx
@@ -1,12 +1,59 @@
 /* Copyright (C) 2024 Manuel Bustillo*/
 
+import { Table } from '@/app/ui/components/table';
+import Summary from '@/app/ui/expenses/summary';
 import { lusitana } from '@/app/ui/fonts';
- 
-export default  function Page () {
+
+export default function Page() {
   return (
     <div className="w-full">
-      <div className="flex w-full items-center justify-between">
+      <div className="w-full items-center justify-between">
         <h1 className={`${lusitana.className} text-2xl`}>Table distributions</h1>
+        <div className="flex flex-row flex-wrap justify-around">
+          <Table guests={
+            [
+              { name: "George Orwell", id: "1" },
+              { name: "Aldous Huxley", id: "2" },
+              { name: "Isaac Asimov", id: "3" },
+              { name: "Arthur C. Clarke", id: "4" },
+              { name: "Philip Roth", id: "5" },
+              { name: "Kurt Vonnegut", id: "6" },
+              { name: "Ray Bradbury", id: "7" },
+              { name: "Jorge Luis Borges", id: "8" },
+              { name: "Gabriel García Márquez", id: "9" },
+              { name: "Julio Cortázar", id: "10" },
+            ]
+          } />
+          <Table guests={
+            [
+              { name: "George Orwell", id: "1" },
+              { name: "Aldous Huxley", id: "2" },
+              { name: "Isaac Asimov", id: "3" },
+              { name: "Arthur C. Clarke", id: "4" },
+              { name: "Philip Roth", id: "5" },
+              { name: "Kurt Vonnegut", id: "6" },
+              { name: "Ray Bradbury", id: "7" },
+              { name: "Jorge Luis Borges", id: "8" },
+              { name: "Gabriel García Márquez", id: "9" },
+              { name: "Julio Cortázar", id: "10" },
+            ]
+          } />
+          <Table guests={
+            [
+              { name: "George Orwell", id: "1" },
+              { name: "Aldous Huxley", id: "2" },
+              { name: "Isaac Asimov", id: "3" },
+              { name: "Arthur C. Clarke", id: "4" },
+              { name: "Philip Roth", id: "5" },
+              { name: "Kurt Vonnegut", id: "6" },
+              { name: "Ray Bradbury", id: "7" },
+              { name: "Jorge Luis Borges", id: "8" },
+              { name: "Gabriel García Márquez", id: "9" },
+              { name: "Julio Cortázar", id: "10" },
+            ]
+          } />
+        </div>
+
       </div>
     </div>
   );
diff --git a/app/lib/definitions.ts b/app/lib/definitions.ts
index 70eacd2..4a9f09e 100644
--- a/app/lib/definitions.ts
+++ b/app/lib/definitions.ts
@@ -21,9 +21,9 @@ export type Customer = {
 export type Guest = {
   id: string;
   name: string;
-  email: string;
-  group_name: string;
-  status: 'Considered' | 'Invited' | 'Confirmed' | 'Declined' | 'Tentative';
+  email?: string;
+  group_name?: string;
+  status?: 'Considered' | 'Invited' | 'Confirmed' | 'Declined' | 'Tentative';
 }
 
 export type Group = {
diff --git a/app/ui/components/table.tsx b/app/ui/components/table.tsx
new file mode 100644
index 0000000..841f6c8
--- /dev/null
+++ b/app/ui/components/table.tsx
@@ -0,0 +1,31 @@
+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-neutral-400 hover:bg-neutral-500 content-center text-center">
+                        {guest.name}
+                    </div>
+                )
+            })
+        }
+
+    </div>)
+}
+
+export function Table({ 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-neutral-300 flex flex-col justify-between">
+            <GuestRow guests={arrayFirstHalf} />
+            <GuestRow guests={arraySecondHalf} />
+        </div>
+    )
+}
\ No newline at end of file