move contributors to metadata section

Author: Deepthi-Chand

app/[locale]/(user)/collaboratives/[collaborativeSlug]/CollaborativeDetailsClient.tsx

@@ -309,9 +309,7 @@ const CollaborativeDetailClient = () => {
                   <Metadata data={CollaborativeDetailsData} />
                 </div>
               </div>
-              {(hasSupportingOrganizations ||
-              hasPartnerOrganizations ||
-              hasContributors) && (
+              {(hasSupportingOrganizations || hasPartnerOrganizations) && (
               <div className=" bg-primaryBlue">
                 <div className="container flex flex-wrap gap-8 py-10 lg:flex-nowrap ">
                   {hasSupportingOrganizations && (
@@ -369,41 +367,6 @@ const CollaborativeDetailClient = () => {
                     </div>
                   )}
                 </div>
-                {hasContributors && (
-                  <div className="container py-10">
-                    <div className="flex flex-col gap-1">
-                      <Text variant="headingXl" color="onBgDefault">
-                        Contributors{' '}
-                      </Text>
-                      <Text color="onBgDefault" variant="bodyLg">
-                        Publisher and Contributors who have added to the Collaborative
-                      </Text>
-                    </div>
-                    <div className="mt-8 flex flex-wrap items-center justify-start gap-8">
-                      {CollaborativeDetailsData?.collaborativeBySlug?.contributors?.map(
-                        (contributor: any) => (
-                          <Link
-                            href={`/publishers/${contributor.fullName + '_' + contributor.id}`}
-                            key={contributor.id}
-                          >
-                            <Image
-                              alt={contributor.fullName}
-                              width={120}
-                              height={120}
-                              className="rounded-full object-cover"
-                              key={contributor.id}
-                              src={
-                                contributor.profilePicture?.url
-                                  ? `${process.env.NEXT_PUBLIC_BACKEND_URL}/${contributor.profilePicture?.url}`
-                                  : '/profile.png'
-                              }
-                            />
-                          </Link>
-                        )
-                      )}
-                    </div>
-                  </div>
-                )}
               </div>
             )}              
             </div>

app/[locale]/(user)/collaboratives/components/Metadata.tsx

@@ -225,6 +225,40 @@ const Metadata = ({ data, setOpen }: { data: any; setOpen?: any }) => {
               </Tooltip>
             </div>
           ))}
+          {/* Contributors Section */}
+          {data.collaborativeBySlug.contributors && data.collaborativeBySlug.contributors.length > 0 && (
+            <div className="flex gap-2">
+              <Text
+                className="min-w-[120px] basis-1/4 uppercase"
+                variant="bodyMd"
+                color="onBgDefault"
+              >
+                Contributors
+              </Text>
+              <div className="flex flex-wrap gap-2">
+                {data.collaborativeBySlug.contributors.map((contributor: any) => (
+                  <Link
+                    href={`/publishers/${contributor.fullName + '_' + contributor.id}`}
+                    key={contributor.id}
+                  >
+                    <Tooltip content={contributor.fullName}>
+                      <Image
+                        alt={contributor.fullName}
+                        width={40}
+                        height={40}
+                        className="rounded-full object-cover"
+                        src={
+                          contributor.profilePicture?.url
+                            ? `${process.env.NEXT_PUBLIC_BACKEND_URL}/${contributor.profilePicture?.url}`
+                            : '/profile.png'
+                        }
+                      />
+                    </Tooltip>
+                  </Link>
+                ))}
+              </div>
+            </div>
+          )}
         </div>
       </div>
     </div>