All circuits update json and contributors

src/components/explore-section/Circuit/DetailView/global/ListParameterBox.tsx

@@ -0,0 +1,105 @@
+import { useState } from 'react';
+import { ContributorsProps } from '../../type';
+
+import { CloseIcon } from '@/components/icons';
+
+export function SingleContributorPill({ name, lastName }: { name: string; lastName: string }) {
+  return (
+    <div className="flex flex-row flex-nowrap rounded-full border border-solid border-gray-200 px-4 py-1 text-lg font-normal text-primary-9">
+      <span>
+        {name} {lastName}
+      </span>
+    </div>
+  );
+}
+
+export default function ListParameterBox({
+  name,
+  value,
+  slice = 5,
+}: {
+  name: string;
+  value: ContributorsProps[] | string[];
+  slice?: number;
+}) {
+  const [viewMore, setViewMore] = useState<boolean>(false);
+
+  const contentList = viewMore ? value : value.slice(0, slice);
+
+  return (
+    <div className="relative flex w-full flex-col items-start">
+      <div className="text-sm font-light uppercase tracking-wider text-gray-500">{name}</div>
+
+      <div className="mt-2 flex flex-row flex-wrap gap-2">
+        {contentList.map((item: ContributorsProps | string) => {
+          if (typeof item === 'string') {
+            return (
+              <span
+                key={item}
+                className="hyphens-auto text-xl font-normal leading-normal text-primary-9"
+              >
+                {item}
+              </span>
+            );
+          }
+          return (
+            <SingleContributorPill
+              key={`${item.name}-${item.lastName}`}
+              name={item.name}
+              lastName={item.lastName}
+            />
+          );
+        })}
+      </div>
+
+      {value.length > slice && (
+        <button
+          type="button"
+          aria-label="View more"
+          className="mt-2 rounded-full border border-solid border-gray-300 bg-white px-4 py-2 text-base font-normal text-neutral-5"
+          onClick={() => setViewMore(true)}
+        >
+          View more
+        </button>
+      )}
+
+      {viewMore && (
+        <div className="fixed left-0 top-0 z-[99999] flex h-screen w-screen items-center justify-center bg-black/60">
+          <div className="flex w-2/3 flex-col rounded-md bg-white p-10 text-primary-9">
+            <div className="mb-2 flex flex-row justify-between">
+              <div className="text-xl font-bold">{name}</div>
+              <button
+                type="button"
+                aria-label="Close view more modal"
+                onClick={() => setViewMore(false)}
+              >
+                <CloseIcon className="h-4 w-4 text-primary-9" />
+              </button>
+            </div>
+            <div className="flex flex-row flex-wrap gap-2">
+              {contentList.map((item: ContributorsProps | string) => {
+                if (typeof item === 'string') {
+                  return (
+                    <span
+                      key={item}
+                      className="flex flex-row items-center hyphens-auto text-xl font-normal leading-normal text-primary-9 before:mr-2 before:block before:h-2 before:w-2 before:rounded-full before:bg-primary-9 before:content-['']"
+                    >
+                      {item}.
+                    </span>
+                  );
+                }
+                return (
+                  <SingleContributorPill
+                    key={`${item.name}-${item.lastName}`}
+                    name={item.name}
+                    lastName={item.lastName}
+                  />
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

src/components/explore-section/Circuit/DetailView/global/ParameterBox.tsx

@@ -5,6 +5,15 @@ import { useState } from 'react';
 
 import { CloseIcon } from '@/components/icons';
 
+export function SingleContributorPill({ name, lastName }: { name: string; lastName: string }) {
+  return (
+    <div className="border border-solid border-gray-200 text-sm font-normal text-primary-9">
+      <div>{name}</div>
+      <div>{lastName}</div>
+    </div>
+  );
+}
+
 export default function ParameterBox({
   name,
   value,

src/components/explore-section/Circuit/DetailView/header/circuit-metadata.tsx

@@ -1,4 +1,5 @@
 import { CircuitSchemaProps } from '../../type';
+import ListParameterBox from '../global/ListParameterBox';
 import ParameterBox from '../global/ParameterBox';
 
 export default function CircuitMetadata({ content }: { content: CircuitSchemaProps }) {
@@ -8,17 +9,13 @@ export default function CircuitMetadata({ content }: { content: CircuitSchemaPro
         <ParameterBox name="Description" value={content.description} />
       </div>
       <div>
-        <ParameterBox
-          name="Contributors"
-          value={content.metadata.contributors || '–'}
-          hasViewMore
-        />
+        <ListParameterBox name="Contributors" value={content.metadata.contributors ?? []} />
       </div>
       <div>
-        <ParameterBox
+        <ListParameterBox
           name="Contributing institutions"
-          value={content.metadata.contributingInstitution || '–'}
-          hasViewMore
+          value={content.metadata.organizations}
+          slice={2}
         />
       </div>
     </div>

src/components/explore-section/Circuit/type/index.tsx

@@ -39,7 +39,8 @@ export type CircuitSchemaProps = {
   numberOfSynapses: number;
   metadata: {
     contributorSimple?: string;
-    contributors?: string;
+    contributors?: ContributorsProps[];
+    organizations: string[];
     contributingInstitution?: string;
     publishedIn?: string;
     registrationDate?: string;
@@ -142,3 +143,8 @@ export type FileTypeHeaderProps = {
 export interface FilteredCircuit extends CircuitSchemaProps {
   isNonMatchingParent?: boolean;
 }
+
+export type ContributorsProps = {
+  name: string;
+  lastName: string;
+};