From bed53f1b81ae716c69534805d66325bae8b8a829 Mon Sep 17 00:00:00 2001
From: Peer Richelsen <peer@cal.com>
Date: Mon, 14 Oct 2024 10:50:55 +0200
Subject: [PATCH] list layout form ultiple callers

---
 .../components/dialog/InstantCallDialog.tsx   | 89 +++++++++++++++----
 1 file changed, 74 insertions(+), 15 deletions(-)

diff --git a/apps/web/components/dialog/InstantCallDialog.tsx b/apps/web/components/dialog/InstantCallDialog.tsx
index 6fa448a048fafe..2ee5b78d1ff9e1 100644
--- a/apps/web/components/dialog/InstantCallDialog.tsx
+++ b/apps/web/components/dialog/InstantCallDialog.tsx
@@ -11,27 +11,55 @@ interface IInstantCallDialog {
 export const InstantCallDialog = (props: IInstantCallDialog) => {
   const { t } = useLocale();
 
+  const multipleCallers = true; // just for testing purposes
+
   const { isOpenDialog, setIsOpenDialog } = props;
 
   return (
     <>
       <Dialog open={true} onOpenChange={setIsOpenDialog}>
         <DialogContent enableOverflow>
-          <DialogHeader title={t("Incoming Call")} />
-          <div>
-            <p>Peer Richelsen is calling for a &quot;NAME OF EVENT TYPE&quot; meeting.</p>
-            <p>You have n minutes and n seconds to accept.</p>
-          </div>
-          <DialogFooter>
-            <div className="flex w-full justify-center gap-2">
-              <Button type="button" className="border-[#DE4B2B] !bg-[#DE4B2B] text-white">
-                {t("Ignore")}
-              </Button>
-              <Button StartIcon="phone" className="border-[#52B65A] !bg-[#52B65A] text-white">
-                {t("Accept")}
-              </Button>
-            </div>
-          </DialogFooter>
+          {multipleCallers ? (
+            <>
+              <DialogHeader title={t("Incoming Calls")} />
+              <ul role="list" className="mb-6 divide-y">
+                {comments.map((comment) => (
+                  <li key={comment.id} className="flex w-full items-center justify-between py-2">
+                    <div>
+                      <p className="text-sm font-semibold">{comment.name}</p>
+                      <p className="line-clamp-2 w-full text-sm">{comment.content}</p>
+                    </div>
+                    <div className="flex gap-2">
+                      <Button type="button" className="border-[#DE4B2B] !bg-[#DE4B2B] text-white">
+                        {t("Ignore")}
+                      </Button>
+                      <Button StartIcon="phone" className="border-[#52B65A] !bg-[#52B65A] text-white">
+                        {t("Accept")}
+                      </Button>
+                    </div>
+                  </li>
+                ))}
+              </ul>
+            </>
+          ) : (
+            <>
+              <DialogHeader title={t("Incoming Call")} />
+              <div>
+                <p>Peer Richelsen is calling for a &quot;NAME OF EVENT TYPE&quot; meeting.</p>
+                <p>You have n minutes and n seconds to accept.</p>
+              </div>
+              <DialogFooter>
+                <div className="flex w-full justify-center gap-2">
+                  <Button type="button" className="border-[#DE4B2B] !bg-[#DE4B2B] text-white">
+                    {t("Ignore")}
+                  </Button>
+                  <Button StartIcon="phone" className="border-[#52B65A] !bg-[#52B65A] text-white">
+                    {t("Accept")}
+                  </Button>
+                </div>
+              </DialogFooter>
+            </>
+          )}
         </DialogContent>
         {/* TODO: Add programmatic way of triggering the audio without controls */}
         <audio controls src="/ringing.mp3">
@@ -42,3 +70,34 @@ export const InstantCallDialog = (props: IInstantCallDialog) => {
     </>
   );
 };
+
+const comments = [
+  {
+    id: 1,
+    name: "Leslie Alexander",
+    content: "Sales Exploration",
+    date: "1d ago",
+    dateTime: "2023-03-04T15:54Z",
+  },
+  {
+    id: 2,
+    name: "Michael Foster",
+    content: "Sales Exploration",
+    date: "2d ago",
+    dateTime: "2023-03-03T14:02Z",
+  },
+  {
+    id: 3,
+    name: "Dries Vincent",
+    content: "Sales Exploration",
+    date: "2d ago",
+    dateTime: "2023-03-03T13:23Z",
+  },
+  {
+    id: 4,
+    name: "Lindsay Walton",
+    content: "Sales Exploration",
+    date: "3d ago",
+    dateTime: "2023-03-02T21:13Z",
+  },
+];