Fix + Improve Person view

opengento · Feb 6, 2025 · 4a73818 · 4a73818
1 parent 73faa47
commit 4a73818
Show file tree

Hide file tree

Showing 6 changed files with 89 additions and 109 deletions.
diff --git a/src/app/mentions-legales/page.tsx b/src/app/mentions-legales/page.tsx
@@ -75,13 +75,11 @@ export default function Page() {
         <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-8 gap-y-12 mt-8">
           {developers
             .map((developer) => (
-              <div
-                key={developer.id}
-                className="flex flex-row gap-6 group hover:cursor-pointer"
+              <Person
+                person={developer}
                 onClick={() => handleDeveloperClick(developer)}
-              >
-                <Person person={developer}/>
-              </div>
+                key={developer.id}
+              />
             ))}
         </div>
         {selectedDeveloper && (

diff --git a/src/app/speakers/page.tsx b/src/app/speakers/page.tsx
@@ -47,13 +47,11 @@ export default function Page() {
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 gap-y-12 my-7">
         {speakers.speakers
           .map((speaker) => (
-            <div
-              key={speaker.id}
-              className="flex flex-row gap-6 group hover:cursor-pointer"
+            <Person
+              person={speaker}
               onClick={() => handleSpeakerClick(speaker)}
-            >
-              <Person person={speaker}/>
-            </div>
+              key={speaker.id}
+            />
           ))}
       </div>
       <Push/>

diff --git a/src/app/staff/page.tsx b/src/app/staff/page.tsx
@@ -71,13 +71,11 @@ export default function Page() {
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 gap-y-12 my-7">
         {staffMembers
           .map((staff) => (
-            <div
-              key={staff.id}
-              className="flex flex-row gap-6 group hover:cursor-pointer"
+            <Person
+              person={staff}
               onClick={() => handleStaffClick(staff)}
-            >
-              <Person person={staff}/>
-            </div>
+              key={staff.id}
+            />
           ))}
       </div>
       <Push />

diff --git a/src/components/Person/Person.tsx b/src/components/Person/Person.tsx
@@ -1,10 +1,8 @@
-import React from "react";
 import Image from "next/image";
-import useWindowSize from "@/hooks/useWindowSize";
 import { GrFormView } from "react-icons/gr";
 import { PersonProps } from "@/components/Person/PersonProps";
 import classNames from "classnames";
-import ClientOnly from "@/helpers/ClientOnly";
+import { MouseEventHandler } from "react";
 
 const PersonCard = ({
   person,
@@ -13,9 +11,9 @@ const PersonCard = ({
   person: PersonProps;
   appearance?: "speaker" | "program";
 }) => (
-  <div className="text-black flex flex-col justify-center">
+  <div className="text-black">
     {appearance === "speaker" && (
-      <div className="flex gap-2 mb-2">
+      <div className="flex flex-wrap gap-2 mb-2">
         <Image
           src={person.companyLogo}
           alt={person.company}
@@ -32,61 +30,51 @@ const PersonCard = ({
 
 const Person = ({
   person,
+  onClick,
   appearance = "speaker",
 }: {
   person: PersonProps;
+  onClick?: MouseEventHandler<HTMLDivElement> | undefined;
   appearance?: "speaker" | "program";
 }) => {
-  const { width } = useWindowSize();
-
   const imageClass = classNames(
-    "relative aspect-square object-cover overflow-hidden",
+    "aspect-square object-cover overflow-hidden",
     {
-      "w-20 h-24": appearance === "program",
-      "min-w-[135px]": appearance === "speaker" && width < 768,
-      "min-w-[165px]": appearance === "speaker" && width >= 768,
-      "rounded-full": appearance === "speaker",
-      "[clip-path:polygon(50%_0%,100%_25%,100%_75%,50%_100%,0%_75%,0%_25%)]":
-        appearance === "program",
+      "w-20 h-24 [clip-path:polygon(50%_0%,100%_25%,100%_75%,50%_100%,0%_75%,0%_25%)]": appearance === "program",
+      "w-[135px] h-[135px] 3xl:w-[165px] 3xl:h-[165px] rounded-full": appearance === "speaker",
     }
   );
 
   return (
-    <ClientOnly>
-      {width < 768 ? (
-        <div className="flex flex-row gap-2">
-          <Image
-            src={person.photo}
-            alt={person.name}
-            width={appearance === "program" ? 96 : 135}
-            height={appearance === "program" ? 96 : 135}
-            className={imageClass}
-          />
-          <PersonCard person={person} appearance={appearance} />
-        </div>
-      ) : (
-        <div className="flex flex-row gap-6">
-          <div className="flex flex-col relative">
-            <Image
-              src={person.photo}
-              alt={person.name}
-              width={appearance === "program" ? 96 : 165}
-              height={appearance === "program" ? 96 : 165}
-              className={imageClass}
-            />
-            {appearance === "speaker" && (
-              <div className="text-white font-semibold lg:opacity-0 lg:group-hover:opacity-100 lg:transition-opacity lg:duration-300 lg:hover:cursor-pointer bg-primary w-fit px-4 py-2 rounded-full absolute bottom-0 left-1/2 -translate-x-1/2">
-                <div className="flex flex-row items-center gap-1">
-                  <GrFormView size={20} className="text-white" />
-                  <span className="text-sm">Biographie</span>
-                </div>
-              </div>
-            )}
-          </div>
-          <PersonCard person={person} appearance={appearance} />
-        </div>
+    <div
+      className={classNames(
+        "flex flex-row gap-2 3xl:gap-6 group cursor-pointer",
+        {
+          "items-center": appearance === "program",
+          "items-start sm:items-center": appearance === "speaker"
+        }
       )}
-    </ClientOnly>
+      onClick={onClick}
+    >
+      <div className="relative shrink-0">
+        <Image
+          src={person.photo}
+          alt={person.name}
+          width={appearance === "program" ? 96 : 165}
+          height={appearance === "program" ? 96 : 165}
+          className={imageClass}
+        />
+        {onClick !== undefined && appearance === "speaker" && (
+          <div className="text-white font-semibold lg:opacity-0 lg:group-hover:opacity-100 lg:transition-opacity lg:duration-300 lg:hover:cursor-pointer bg-primary w-fit px-4 py-2 rounded-full absolute bottom-0 left-1/2 -translate-x-1/2">
+            <div className="flex flex-row items-center gap-1">
+              <GrFormView size={20} className="text-white" />
+              <span className="text-sm">Biographie</span>
+            </div>
+          </div>
+        )}
+      </div>
+      <PersonCard person={person} appearance={appearance} />
+    </div>
   );
 };
 

diff --git a/src/components/Speakers/SpeakersList.tsx b/src/components/Speakers/SpeakersList.tsx
@@ -91,12 +91,10 @@ const SpeakersList = ({ speakers }: { speakers: PersonProps[] }) => {
         >
           {width < 768
             ? speakers.map((speaker) => (
-                <SwiperSlide key={speaker.id}>
-                  <div onClick={() => handleSpeakerClick(speaker)}>
-                    <Person person={speaker} />
-                  </div>
-                </SwiperSlide>
-              ))
+              <SwiperSlide key={speaker.id}>
+                <Person person={speaker} onClick={() => handleSpeakerClick(speaker)}/>
+              </SwiperSlide>
+            ))
             : width < 1024
             ? Array.from({ length: Math.ceil(speakers.length / 4) }).map(
                 (_, slideIndex) => (
@@ -105,13 +103,11 @@ const SpeakersList = ({ speakers }: { speakers: PersonProps[] }) => {
                       {speakers
                         .slice(slideIndex * 4, (slideIndex + 1) * 4)
                         .map((speaker) => (
-                          <div
-                            key={speaker.id}
-                            className="flex flex-row gap-6 group hover:cursor-pointer"
+                          <Person
+                            person={speaker}
                             onClick={() => handleSpeakerClick(speaker)}
-                          >
-                            <Person person={speaker} />
-                          </div>
+                            key={speaker.id}
+                          />
                         ))}
                     </div>
                   </SwiperSlide>
@@ -124,13 +120,11 @@ const SpeakersList = ({ speakers }: { speakers: PersonProps[] }) => {
                       {speakers
                         .slice(slideIndex * 6, (slideIndex + 1) * 6)
                         .map((speaker) => (
-                          <div
-                            key={speaker.id}
-                            className="flex flex-row gap-6 group hover:cursor-pointer"
+                          <Person
+                            person={speaker}
                             onClick={() => handleSpeakerClick(speaker)}
-                          >
-                            <Person person={speaker} />
-                          </div>
+                            key={speaker.id}
+                          />
                         ))}
                     </div>
                   </SwiperSlide>

diff --git a/src/components/SponsorList/Sponsor/Sponsor.tsx b/src/components/SponsorList/Sponsor/Sponsor.tsx
@@ -19,10 +19,10 @@ const Sponsor = (sponsor: SponsorProps) => {
     bronze: "bg-[url(/images/background/sponsor-bronze.png)] hover:bg-[url(/images/background/sponsor-bronze.png)] p-[40px] col-span-4 row-span-1 lg:col-span-2 lg:row-span-2",
   };
   const badgeClasses: Record<SponsorTypeProps, string> = {
-    platinum: "top-[30px] right-[30px] h-[55px] w-auto lg:top-[24px] lg:right-[24px] lg:h-[80px]",
-    gold: "top-[7px] right-[7px] h-[27px] w-auto lg:top-[12px] lg:right-[12px] lg:h-[50px]",
-    silver: "top-[10px] right-[10px] h-[16px] w-auto lg:top-[12px] lg:right-[12px] lg:h-[40px]",
-    bronze: "top-[6px] right-[6px] h-[14px] w-auto lg:top-[11px] lg:right-[11px] lg:h-[25px]",
+    platinum: "top-[30px] right-[30px] h-[55px] lg:top-[24px] lg:right-[24px] lg:h-[80px]",
+    gold: "top-[7px] right-[7px] h-[27px] lg:top-[12px] lg:right-[12px] lg:h-[50px]",
+    silver: "top-[10px] right-[10px] h-[16px] lg:top-[12px] lg:right-[12px] lg:h-[40px]",
+    bronze: "top-[6px] right-[6px] h-[14px] lg:top-[11px] lg:right-[11px] lg:h-[25px]",
   };
   const logoClasses: Record<SponsorTypeProps, string> = {
     platinum: "",
@@ -35,29 +35,33 @@ const Sponsor = (sponsor: SponsorProps) => {
     <div className={classNames(
       'duration-150 lg:bg-none lg:bg-black/70 lg:backdrop-blur-md bg-cover',
       'hover:bg-transparent hover:backdrop-blur-none hover:bg-cover',
-      'group rounded-lg relative inline-flex justify-center items-center overflow-hidden',
+      'group rounded-lg relative flex justify-center items-center overflow-hidden',
       boxClasses[sponsor.type]
     )}>
-      <Image src={`/images/badges/${sponsor.type}.svg`}
-             alt={sponsor.type}
-             className={classNames(
-               'absolute lg:hidden group-hover:block',
-               badgeClasses[sponsor.type]
-             )}
-             width={badgeWidth}
-             height={badgeHeight}
-             quality={90}
-      />
-      <Image src={sponsor.logoSrc}
-             alt={sponsor.name}
-             className={classNames(
-               'object-contain object-center max-w-full',
-               logoClasses[sponsor.type]
-             )}
-             width={440}
-             height={560}
-             quality={90}
-      />
+      <div className="inline-block">
+        <Image
+          src={`/images/badges/${sponsor.type}.svg`}
+          alt={sponsor.type}
+          className={classNames(
+            'absolute w-auto lg:hidden group-hover:block',
+            badgeClasses[sponsor.type]
+          )}
+          width={badgeWidth}
+          height={badgeHeight}
+          quality={90}
+        />
+        <Image
+          src={sponsor.logoSrc}
+          alt={sponsor.name}
+          className={classNames(
+            'object-contain object-center max-w-full',
+            logoClasses[sponsor.type]
+          )}
+          width={440}
+          height={560}
+          quality={90}
+        />
+      </div>
     </div>
   );
 };