Merge pull request #42 from compolabs/feedback/fixes

fix partners block
compolabs · Jul 22, 2024 · 85d8a1f · 85d8a1f
2 parents 8747c36 + 9a8ae97
commit 85d8a1f
Showing 1 changed file with 65 additions and 17 deletions.
diff --git a/src/core/components/LandingPage/PartnersSection/PartnersSection.tsx b/src/core/components/LandingPage/PartnersSection/PartnersSection.tsx
@@ -1,32 +1,68 @@
 import React from "react";
-import { css } from "@emotion/react";
 import Image from "next/image";
+import { css } from "@emotion/react";
 
 import SectionWrapper from "@/core/components/common/SectionWrapper";
 import theme from "@/core/styles/theme";
 import { convertPxToRem } from "@/core/utils/convertPxToRem";
+import useWindowWidth from "@/core/hooks/useWindowWidth";
 
 import { items, text } from "./constants";
 
 const PartnersSection = () => {
+  const width = useWindowWidth();
+  const defaultWidth = 1279;
+  const isWidthGreater = width != null ? width > defaultWidth : false;
+
   return (
     <SectionWrapper styles={cssStyles.container}>
       <div>
         <div css={cssStyles.titleWrapper}>
           <h2 css={cssStyles.title}>Investors</h2>
         </div>
         <div css={cssStyles.items}>
-          {items.map((item, id) => (
-            <div key={id} css={cssStyles.item}>
-              <Image
-                src={item.url}
-                alt="trade-platform"
-                width={100}
-                height={40}
-                css
-              />
-            </div>
-          ))}
+          {isWidthGreater ? (
+            <>
+              <div css={cssStyles.topItems}>
+                {items.slice(0, 2).map((item, id) => (
+                  <div key={id} css={cssStyles.item}>
+                    <Image
+                      src={item.url}
+                      alt="investor-logo"
+                      width={100}
+                      height={40}
+                    />
+                  </div>
+                ))}
+              </div>
+              <div css={cssStyles.bottomItems}>
+                {items.slice(2).map((item, id) => (
+                  <div key={id} css={cssStyles.item}>
+                    <Image
+                      src={item.url}
+                      alt="investor-logo"
+                      width={100}
+                      height={40}
+                    />
+                  </div>
+                ))}
+              </div>
+            </>
+          ) : (
+            <>
+              {items.map((item, id) => (
+                <div key={id} css={cssStyles.item}>
+                  <Image
+                    src={item.url}
+                    alt="trade-platform"
+                    width={100}
+                    height={40}
+                    css
+                  />
+                </div>
+              ))}
+            </>
+          )}
         </div>
       </div>
       <div>
@@ -52,7 +88,7 @@ const cssStyles = {
     align-items: center;
     padding: ${convertPxToRem(15)} 0 ${convertPxToRem(70)} 0;
     gap: 100px;
-    padding-bottom: ${convertPxToRem(100)}
+    padding-bottom: ${convertPxToRem(100)};
   `,
   titleWrapper: css`
     margin: 0 auto ${theme.spacing.small};
@@ -84,8 +120,8 @@ const cssStyles = {
     justify-content: center;
     width: ${convertPxToRem(320)};
     gap: 10px;
+
     ${theme.media.tablet} {
-      width: 100%;
       gap: 20px;
     }
   `,
@@ -96,7 +132,6 @@ const cssStyles = {
     display: flex;
     justify-content: center;
     align-items: center;
-
     ${theme.media.tablet} {
       width: ${convertPxToRem(224)};
       height: ${convertPxToRem(80)};
@@ -106,10 +141,23 @@ const cssStyles = {
     flex-direction: column;
     align-items: center;
     ${theme.media.tablet} {
-      flex-direction: unset;
+      width: 100%;
+      flex-direction: row;
       align-items: unset;
     }
   `,
+  topItems: css`
+    ${theme.media.tablet} {
+      display: flex;
+      justify-content: center;
+    }
+  `,
+  bottomItems: css`
+    ${theme.media.tablet} {
+      display: flex;
+      justify-content: center;
+    }
+  `,
 };
 
-export default PartnersSection;
+export default PartnersSection;