feat: responsive layout for the tech stack container

chingu-x · Sep 25, 2023 · 3a9136c · 3a9136c
1 parent 1a38d56
commit 3a9136c
Showing 1 changed file with 2 additions and 12 deletions.
diff --git a/src/app/tech-stack/components/TechStackContainer.tsx b/src/app/tech-stack/components/TechStackContainer.tsx
@@ -1,22 +1,12 @@
 import { TechStackCard, techStack } from ".";
 
 export default function TechStackContainer() {
-  function getJustifyClass(index: number) {
-    if (index % 3 === 0) {
-      return "justify-self-start";
-    } else if (index % 3 === 1) {
-      return "justify-self-center";
-    } else {
-      return "justify-self-end";
-    }
-  }
   return (
     <div className="card bg-primary-content p-10 w-full">
-      <ul className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-y-20 justify-items-stretch">
-        {Object.keys(techStack).map((cardType, index) => (
+      <ul className="grid grid-cols-2 min-[1920px]:grid-cols-3 gap-10 place-items-center">
+        {Object.keys(techStack).map((cardType) => (
           <li
             key={cardType}
-            className={`mx-auto xl:mx-0 ${getJustifyClass(index)}`}
           >
             <TechStackCard
               title={cardType}