Add company info and logos below each speaker (#22)

Author: Pabl0cks

packages/nextjs/app/sessions.ts

@@ -11,6 +11,10 @@ export enum SessionType {
 export type Speaker = {
   name: string;
   image: string;
+  company?: {
+    name: string;
+    icon: string;
+  };
 };
 
 export interface Session {
@@ -43,54 +47,106 @@ export const SPEAKERS = {
   PATRICK: {
     name: "Patrick McCorry",
     image: "/speakers/patrick.jpg",
+    company: {
+      name: "Arbitrum",
+      icon: "/companies/arbitrum.svg",
+    },
   },
   AUSTIN: {
     name: "Austin Griffith",
     image: "/speakers/austin.png",
+    company: {
+      name: "Ethereum Foundation",
+      icon: "/companies/ethereum-foundation.png",
+    },
   },
   CARLOS: {
     name: "Carlos Sánchez",
     image: "/speakers/carlos.jpg",
+    company: {
+      name: "BuidlGuidl",
+      icon: "/companies/buidlguidl.svg",
+    },
   },
   SHIV: {
     name: "Shiv Bhonde",
     image: "/speakers/shiv.jpeg",
+    company: {
+      name: "BuidlGuidl",
+      icon: "/companies/buidlguidl.svg",
+    },
   },
   PABLO: {
     name: "Pablo Alayeto",
     image: "/speakers/pablo.png",
+    company: {
+      name: "BuidlGuidl",
+      icon: "/companies/buidlguidl.svg",
+    },
   },
   PHILIP: {
     name: "Philip Krause",
     image: "/speakers/philip.png",
+    company: {
+      name: "BuidlGuidl",
+      icon: "/companies/buidlguidl.svg",
+    },
   },
   ELLIOT: {
     name: "Elliott Alexander",
     image: "/speakers/elliott.png",
+    company: {
+      name: "Ethereum Foundation",
+      icon: "/companies/ethereum-foundation.png",
+    },
   },
   HORSEFACTS: {
     name: "Horsefacts",
     image: "/speakers/horsefacts.jpg",
+    company: {
+      name: "Farcaster",
+      icon: "/companies/farcaster.svg",
+    },
   },
   SHYAM: {
     name: "Shyam",
     image: "/speakers/shyam.jpg",
+    company: {
+      name: "Ethereum Foundation",
+      icon: "/companies/ethereum-foundation.png",
+    },
   },
   EDA: {
     name: "Eda Akturk",
     image: "/speakers/eda.jpg",
+    company: {
+      name: "Hyperlane",
+      icon: "/companies/hyperlane.jpeg",
+    },
   },
   KEVIN: {
     name: "Kevin Jones",
     image: "/speakers/kevin.jpg",
+    company: {
+      name: "Edge & Node",
+      icon: "/companies/edge-and-node.png",
+    },
   },
   SPENCER: {
     name: "Spencer Faber",
     image: "/speakers/spencer.jpg",
+    company: {
+      name: "BuidlGuidl",
+      icon: "/companies/buidlguidl.svg",
+    },
   },
   JEFFREY: {
     name: "Jeffrey Scholz",
     image: "/speakers/jeffrey.jpg",
+    company: {
+      name: "RareSkills",
+      icon: "/companies/rareskills.jpeg",
+    },
   },
   NIKOLAI: {
     name: "Nikolai",
@@ -99,6 +155,10 @@ export const SPEAKERS = {
   HUNTER: {
     name: "Hunter B.",
     image: "/speakers/hunter.jpg",
+    company: {
+      name: "Arbitrum",
+      icon: "/companies/arbitrum.svg",
+    },
   },
   MONICA: {
     name: "Monica Zeng",
@@ -107,10 +167,18 @@ export const SPEAKERS = {
   DAMU: {
     name: "Damian Martinelli",
     image: "/speakers/damu.jpg",
+    company: {
+      name: "BuidlGuidl",
+      icon: "/companies/buidlguidl.svg",
+    },
   },
   SOPHIA: {
     name: "Sophia",
     image: "/speakers/sophia.jpg",
+    company: {
+      name: "Celo",
+      icon: "/companies/celo.svg",
+    },
   },
 };
 

packages/nextjs/components/SessionModal.tsx

@@ -52,16 +52,16 @@ export const SessionModal = ({ session, isOpen, onClose }: SessionModalProps) =>
   return (
     <div className={`modal ${isOpen ? "modal-open" : ""} items-start sm:items-center pt-16 sm:pt-0`}>
       <div
-        className="modal-box max-w-2xl max-h-[85vh] overflow-y-auto"
+        className="modal-box max-w-2xl max-h-[90vh] overflow-y-auto"
         style={{ backgroundColor: lightColors[session.type] }}
       >
         <div className="flex justify-between items-start mb-4">
           <div>
             <h3 className="font-bold text-lg text-primary mb-0">{session.title}</h3>
             {session.speaker && (
-              <div className="flex items-center gap-6">
+              <div className="flex items-start gap-6 mb-2 mt-3">
                 {session.speaker.map(speaker => (
-                  <div key={speaker.name} className="flex items-center gap-2">
+                  <div key={speaker.name} className="flex items-start gap-2">
                     <Image
                       key={speaker.name}
                       src={speaker.image}
@@ -70,7 +70,23 @@ export const SessionModal = ({ session, isOpen, onClose }: SessionModalProps) =>
                       height={32}
                       className="rounded-full"
                     />
-                    <p className="font-bold">{speaker.name}</p>
+                    <div className="flex flex-col gap-0.5">
+                      <span className="font-bold">{speaker.name}</span>
+                      {speaker.company && (
+                        <div className="flex items-center gap-1.5">
+                          <span className="text-sm text-base-content/70">{speaker.company.name}</span>
+                          <div className="w-4 h-4 flex items-center justify-center flex-shrink-0 rounded overflow-hidden">
+                            <Image
+                              src={speaker.company.icon}
+                              alt={`${speaker.company.name} logo`}
+                              width={16}
+                              height={16}
+                              className="opacity-70 object-contain max-w-full max-h-full"
+                            />
+                          </div>
+                        </div>
+                      )}
+                    </div>
                   </div>
                 ))}
               </div>