Added the full list of contributors

BlueBrain · Oct 23, 2024 · 9f5795c · 9f5795c
1 parent 3311a87
commit 9f5795c
Show file tree

Hide file tree

Showing 4 changed files with 7,833 additions and 44 deletions.
diff --git a/src/components/AboutSFN/Blocs/Footer.tsx b/src/components/AboutSFN/Blocs/Footer.tsx
@@ -1,6 +1,7 @@
 import Link from 'next/link';
 
 import { OBPLogo } from '@/components/Entrypoint/segments/Splash';
+import { classNames } from '@/util/utils';
 
 type SingleSectionProps = {
   title: string;
@@ -33,44 +34,23 @@ const content = [
     ],
   },
   {
-    title: 'Contact',
+    title: 'Resources',
     items: [
       {
-        title: 'Link 1',
-        url: '#',
-      },
-      {
-        title: 'Link 2',
-        url: '#',
-      },
-      {
-        title: 'Link 3',
-        url: '#',
-      },
-      {
-        title: 'Link 4',
-        url: '#',
-      },
-    ],
-  },
-  {
-    title: 'Documentation',
-    items: [
-      {
-        title: 'Link 1',
-        url: '#',
+        title: 'Blue Brain Github',
+        url: 'https://github.com/BlueBrain',
       },
       {
-        title: 'Link 2',
-        url: '#',
+        title: 'Blue Brain Open data',
+        url: 'https://registry.opendata.aws/',
       },
       {
-        title: 'Link 3',
-        url: '#',
+        title: 'Neocortical Microcircuit Collaboration Portal',
+        url: 'https://bbp.epfl.ch/nmc-portal/welcome.html',
       },
       {
-        title: 'Link 4',
-        url: '#',
+        title: 'Blue Brain Project',
+        url: 'https://www.epfl.ch/research/domains/bluebrain/',
       },
     ],
   },
@@ -97,22 +77,29 @@ const content = [
   },
 ];
 
-export default function Footer() {
+export default function Footer({ className }: { className?: string }) {
   return (
-    <div className="relative flex w-full flex-row items-start justify-between border-t border-solid border-primary-4 pb-20 pt-32">
+    <div
+      className={classNames(
+        'relative flex w-full flex-row items-start justify-between border-t border-solid border-primary-4 px-[8vw] pb-20 pt-32',
+        className
+      )}
+    >
       <OBPLogo color="text-white" />
       <div className="relative flex w-2/3 flex-row justify-between gap-x-10">
         {content.map((section: SingleSectionProps, index: number) => (
           <div
             key={`Footer_element-${section.title}-${index + 1}`}
             className="flex flex-col gap-y-3"
           >
-            <h4 className="text-xl font-semibold uppercase tracking-[0.06em]">{section.title}</h4>
+            <h4 className="text-xl font-semibold uppercase tracking-[0.06em] text-white">
+              {section.title}
+            </h4>
             {section.items.map((item: { title: string; url: string }, idx: number) => (
               <Link
                 key={`link_${item.title}-${idx + 1}`}
                 href={item.url}
-                className="font-sans text-xl font-light leading-normal"
+                className="font-sans text-xl font-light leading-normal text-white transition-colors duration-300 ease-linear hover:text-primary-3"
               >
                 {item.title}
               </Link>

diff --git a/src/components/Entrypoint/index.tsx b/src/components/Entrypoint/index.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import Footer from '../AboutSFN/Blocs/Footer';
 import HeaderScreen from '../home/screens/HeaderScreen';
 import ScreenBBGithub from '../home/screens/ScreenBBGithub';
 import ScreenContributors from '../home/screens/ScreenContributors';
@@ -15,6 +16,7 @@ export default function Entrypoint({ errorCode }: { errorCode?: string }) {
         <ScreenBBGithub />
         <ScreenOpenData />
         <ScreenContributors />
+        <Footer className="snap-start snap-always" />
       </div>
       {errorCode && <AcceptInviteErrorDialog errorCode={errorCode} />}
     </div>

diff --git a/src/components/home/screens/ScreenContributors.tsx b/src/components/home/screens/ScreenContributors.tsx
@@ -1,6 +1,11 @@
+'use client';
+
 import Link from 'next/link';
 
 import { CONTRIBUTORS } from '@/constants/home/content-home';
+import { ContributorProps, CONTRIBUTORS_LIST } from '@/constants/home/contributors-list';
+import { classNames } from '@/util/utils';
+import { useState } from 'react';
 
 export function SingleContributorCard({ name, link }: { name: string; link: string }) {
   return (
@@ -11,22 +16,79 @@ export function SingleContributorCard({ name, link }: { name: string; link: stri
   );
 }
 
+export function LoadButton({
+  onClick,
+  label,
+  type,
+}: {
+  onClick: () => void;
+  label: string;
+  type: 'load' | 'unload';
+}) {
+  return (
+    <button
+      type="button"
+      aria-label="Load 25 more contributors's name"
+      onClick={onClick}
+      className={classNames(
+        'relative flex items-center justify-center rounded-full border border-solid border-primary-4 px-16 py-4 font-sans text-xl font-semibold',
+        type === 'load' ? 'text-white' : 'text-primary-4'
+      )}
+    >
+      {label}
+    </button>
+  );
+}
+
 export default function ScreenContributors() {
+  const [displayedNameNumber, setDisplayedNameNumber] = useState(20);
+
+  const handleLoadTwentyFiveMore = () => {
+    if (displayedNameNumber >= CONTRIBUTORS_LIST.length) return;
+    setDisplayedNameNumber(displayedNameNumber + 25);
+
+    window.scrollBy({
+      top: 200,
+      left: 0,
+      behavior: 'smooth',
+    });
+  };
+
+  const handleUnloadTwentyFiveLess = () => {
+    setDisplayedNameNumber(displayedNameNumber + 25);
+  };
+
+  const handleCollapseAll = () => {
+    setDisplayedNameNumber(25);
+  };
+
   return (
-    <div className="relative flex min-h-screen w-screen snap-start snap-always flex-col items-center gap-y-6 px-[16vw] pt-[24vh]">
-      <div className="grid w-full grid-cols-2 gap-x-6 font-title">
+    <div className="relative flex min-h-screen w-screen snap-start snap-always flex-col items-center gap-y-6 pb-56 pt-[24vh]">
+      <div className="grid w-full grid-cols-2 gap-x-6 px-[16vw] font-title">
         <h3 className="text-7xl font-bold text-white">{CONTRIBUTORS.title}</h3>
         <h4 className="text-4xl font-normal text-primary-2">{CONTRIBUTORS.subtitle}</h4>
       </div>
-      <div className="relative left-8 mt-20 grid w-full grid-cols-4 gap-x-4 gap-y-20">
-        {CONTRIBUTORS.contributors.map((contributor: { name: string; link: string }, index) => (
-          <SingleContributorCard
-            key={`Contributor_Card_${index + 1}`}
-            name={contributor.name}
-            link={contributor.link}
-          />
-        ))}
+      <div className="relative left-8 mb-12 mt-20 grid w-full grid-cols-5 gap-x-4 gap-y-20 px-[8vw]">
+        {CONTRIBUTORS_LIST.slice(0, displayedNameNumber).map(
+          (contributor: ContributorProps, index) => (
+            <SingleContributorCard
+              key={`Contributor-${contributor.last_name}_Card_${index + 1}`}
+              name={contributor.full_name}
+              link="#"
+            />
+          )
+        )}
       </div>
+      {displayedNameNumber === CONTRIBUTORS_LIST.length ? (
+        <LoadButton type="load" label="Collapse" onClick={handleCollapseAll} />
+      ) : (
+        <div className="flex flex-row gap-x-6">
+          {displayedNameNumber > 25 && (
+            <LoadButton type="unload" label="Show 25 less" onClick={handleUnloadTwentyFiveLess} />
+          )}
+          <LoadButton type="load" label="Load 25 more" onClick={handleLoadTwentyFiveMore} />
+        </div>
+      )}
     </div>
   );
 }