From 9a1b5ad14958d957a0c6417c4ae873b5e64727ca Mon Sep 17 00:00:00 2001
From: Benny Joo <sldisek783@gmail.com>
Date: Wed, 6 Nov 2024 02:58:35 -0500
Subject: [PATCH] fix: broken social media preview and title (#17504)

* fix: broken social media preview and title

* remove code not needed
---
 packages/lib/OgImages.tsx | 22 +++++++++++++---------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/packages/lib/OgImages.tsx b/packages/lib/OgImages.tsx
index 6c4e45dca1..435b52e23f 100644
--- a/packages/lib/OgImages.tsx
+++ b/packages/lib/OgImages.tsx
@@ -1,3 +1,4 @@
+import Image from "next/image";
 import React from "react";
 
 import { CAL_URL, LOGO, WEBAPP_URL } from "./constants";
@@ -131,6 +132,17 @@ export const Meeting = ({ title, users = [], profile }: MeetingImageProps) => {
       return null;
     })
     .filter(Boolean) as string[];
+  const avatarComponents = avatars
+    .slice(0, 3)
+    .map((avatar) => (
+      <Image
+        tw="rounded-full mr-[-36px] border-[6px] border-[#CDCED2]"
+        key={avatar}
+        src={avatar}
+        alt="Profile picture"
+        width="160"
+      />
+    ));
 
   // In case there is NO other attendee than the single meeting profile without an image, we add
   // that name back in here, since the event probably is a round robin event.
@@ -147,15 +159,7 @@ export const Meeting = ({ title, users = [], profile }: MeetingImageProps) => {
             </div>
           )}
           <div tw="flex flex-row">
-            {avatars.slice(0, 3).map((avatar) => (
-              <img
-                tw="rounded-full mr-[-36px] border-[6px] border-[#CDCED2]"
-                key={avatar}
-                src={avatar}
-                alt="Profile picture"
-                width="160"
-              />
-            ))}
+            {avatarComponents}
             {avatars.length > 3 && (
               <div tw="flex items-center justify-center w-[160px] h-[160px] rounded-full bg-black text-inverted text-[54px] font-bold">
                 <span tw="flex top-[-5px] left-[-5px]">+{avatars.length - 3}</span>