feat: update <Speakers> grid items

frontChapter · Jan 22, 2024 · b0a785d · b0a785d
1 parent f6f7f75
commit b0a785d
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 13 deletions.
diff --git a/src/app/components/Speakers/SpeakerCard.tsx b/src/app/components/Speakers/SpeakerCard.tsx
@@ -10,7 +10,7 @@ const SpeakerCard = ({
   socials,
 }: TSpeakerCard) => {
   return (
-    <div className="flex flex-col items-center gap-2 lg:gap-4">
+    <div className="flex w-1/2 flex-col items-center gap-2 md:w-1/3 lg:w-1/4 lg:gap-4">
       <Image
         width={128}
         height={128}
@@ -23,7 +23,7 @@ const SpeakerCard = ({
         <span className="text-sm text-zinc-400 lg:text-base">{position}</span>
         <span className="text-sm text-zinc-400 lg:text-base">{company}</span>
       </div>
-      <div className="flex gap-3 lg:gap-2">
+      <div className="flex gap-3 p-1 lg:gap-2 lg:p-2">
         <SpeakerSocials {...socials} />
       </div>
     </div>

diff --git a/src/app/components/Speakers/Speakers.tsx b/src/app/components/Speakers/Speakers.tsx
@@ -1,5 +1,4 @@
 import { RiMicLine } from "react-icons/ri";
-import { cn } from "@/utils/styles";
 import { speakersData } from "@/data/speakersData";
 import SpeakerCard from "./SpeakerCard";
 
@@ -14,19 +13,15 @@ export default function Speakers() {
         </div>
 
         {/* body */}
-        <div className="flex w-full flex-wrap justify-center gap-y-6 sm:gap-y-8 lg:gap-y-10">
+        <div className="flex flex-wrap items-center justify-center gap-y-4 md:gap-y-6 lg:gap-y-0">
           {speakersData.map((item, index) => {
             return (
-              <div
-                key={index}
-                className={cn(
-                  `flex w-1/2 flex-col items-center sm:w-1/3 lg:w-1/4 ${
-                    index === 6 && "lg:w-1/3"
-                  }`,
+              <>
+                {[4, 7].includes(index) && (
+                  <div className="hidden h-6 w-full lg:block" />
                 )}
-              >
-                <SpeakerCard {...item} />
-              </div>
+                <SpeakerCard key={index} {...item} />
+              </>
             );
           })}
         </div>