refactor(EntitySelection): update contributor display to include images and improve layout

Author: sanjaypinna

app/[locale]/dashboard/[entityType]/[entitySlug]/usecases/edit/[id]/contributors/EntitySelection.tsx

@@ -1,3 +1,4 @@
+import Image from 'next/image';
 import { Button, Icon, Text } from 'opub-ui';
 
 import { Icons } from '@/components/icons';
@@ -13,6 +14,7 @@ type EntitySectionProps = {
   selectedValues: Option[];
   onChange: (values: Option[]) => void;
   onRemove: (value: Option) => void;
+  data: any;
 };
 
 const EntitySection = ({
@@ -23,11 +25,12 @@ const EntitySection = ({
   selectedValues,
   onChange,
   onRemove,
+  data,
 }: EntitySectionProps) => (
   <div>
     <Text variant="headingMd">{title}</Text>
     <div className="mt-5 flex flex-wrap items-start gap-5 lg:flex-nowrap">
-      <div className="flex w-full flex-wrap items-end gap-5  lg:flex-nowrap">
+      <div className="flex w-full flex-wrap items-start gap-5  lg:flex-nowrap">
         <div className="w-full lg:w-2/6">
           <Text>{label}</Text>
           <CustomCombobox
@@ -47,16 +50,32 @@ const EntitySection = ({
         </div>
         <div className="mt-3 flex flex-wrap gap-3 lg:mt-0">
           {selectedValues.map((item) => (
-            <Button
-              key={item.value}
-              kind="tertiary"
-              onClick={() => onRemove(item)}
-            >
-              <div className="flex items-center gap-2 rounded-2 p-2">
-                <Text>{item.label}</Text>
-                <Icon source={Icons.cross} size={18} />
+            <div className="flex flex-col items-center gap-2" key={item.value}>
+              <div className="rounded-4 bg-surfaceDefault p-4 shadow-basicMd">
+                <Image
+                  src={
+                    data?.find((org: any) => org.id === item.value)?.logo?.url
+                      ? `${process.env.NEXT_PUBLIC_BACKEND_URL}/${
+                          data?.find((org: any) => org.id === item.value)?.logo
+                            ?.url
+                        }`
+                      : '/org.png'
+                  }
+                  alt={item.label}
+                  width={140}
+                  height={100}
+                  className="object-contain"
+                />
               </div>
-            </Button>
+              <Button kind="tertiary" onClick={() => onRemove(item)}>
+                <div className="flex flex-col items-center gap-2 rounded-2 p-2 bg-greyExtralight">
+                  <div className="flex items-center gap-2">
+                    <Text>{item.label}</Text>
+                    <Icon source={Icons.cross} size={18} />
+                  </div>
+                </div>
+              </Button>
+            </div>
           ))}
         </div>
       </div>