feat: adapted to partners images from main branch, handled all cases …

…of width/height bodies, possible to set img height value
SocialGouv · Oct 24, 2024 · 9bdddaf · 9bdddaf
1 parent 80f8978
commit 9bdddaf
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 43 deletions.
diff --git a/webapp/src/components/landing/EllipsePositionnedImages.tsx b/webapp/src/components/landing/EllipsePositionnedImages.tsx
@@ -85,6 +85,7 @@ const EllipsePositionnedImages = ({
             left: "50%",
             top: "50%",
             rotate: index % 2 === 0 ? 5 : -7.5,
+            zIndex: 1,
           }}
         >
           <Image src={src} boxSize={"full"} />
@@ -129,7 +130,6 @@ const EllipsePositionnedImages = ({
     };
   };
 
-
   return getImagesRender();
 };
 

diff --git a/webapp/src/components/landing/PartnerSectionWithPhysics.tsx b/webapp/src/components/landing/PartnerSectionWithPhysics.tsx
@@ -22,31 +22,30 @@ import {
   World,
 } from "matter-js";
 import NextLink from "next/link";
-import React, { useEffect, useRef, useState } from "react";
-
-interface PartnerSectionProps {}
+import React, { useEffect, useRef } from "react";
 
 const partnersList = [
   {
-    name: "Auchan",
-    img: "/images/seeds/partners/auchan.svg",
-    promo_label: "-110€",
+    name: "Deezer",
+    img: "/images/landing/partners/deezer.png",
+    promo_label: "-50%",
+    imgHeight: 28,
   },
   {
-    name: "Flixbus",
-    img: "/images/seeds/partners/flixbus.svg",
-    promo_label: "-10%",
+    name: "AXA",
+    img: "/images/landing/partners/axa.png",
+    promo_label: "-100€",
   },
   {
-    name: "Cora",
-    img: "/images/seeds/partners/cora.svg",
-    promo_label: "Gratuit",
+    name: "La poste mobile",
+    img: "/images/landing/partners/la-poste-mobile.png",
+    promo_label: "-10€",
   },
 ];
 
 const partnerItemClassName = "partner-item";
 
-const PartnerSectionWithPhysics = ({}: PartnerSectionProps) => {
+const PartnerSectionWithPhysics = () => {
   const isDesktop = useBreakpointValue({ base: false, lg: true });
 
   const canvasRef = useRef<HTMLCanvasElement>(null);
@@ -96,11 +95,23 @@ const PartnerSectionWithPhysics = ({}: PartnerSectionProps) => {
       const height = html_element.offsetHeight;
       const x = html_element.offsetLeft + width / 2;
       const y = html_element.offsetTop + height / 2;
-      const isSquare = width === height;
 
       let body;
-      if (isSquare) {
+      if (width === height) {
         body = Bodies.circle(x, y, width / 2, bodyProps);
+      } else if (width < height) {
+        const rectangle = Bodies.rectangle(x, y, width, height - width);
+        const topCircle = Bodies.circle(x, y - (height - width) / 2, width / 2);
+        const bottomCircle = Bodies.circle(
+          x,
+          y + (height - width) / 2,
+          width / 2
+        );
+
+        body = Body.create({
+          ...bodyProps,
+          parts: [rectangle, topCircle, bottomCircle],
+        });
       } else {
         const rectangle = Bodies.rectangle(x, y, width - height, height);
         const leftCircle = Bodies.circle(
@@ -266,16 +277,15 @@ const PartnerSectionWithPhysics = ({}: PartnerSectionProps) => {
               justifyContent="center"
               bg="white"
               rounded="full"
-              h={{ base: 12, lg: 20 }}
-              p={2}
+              h={partner.imgHeight ? partner.imgHeight : { base: 12, lg: 20 }}
+              p={4}
               className={partnerItemClassName}
               pointerEvents={"none"}
               userSelect={"none"}
             >
               <Image
                 src={partner.img}
                 alt={`Logo de ${partner.name}`}
-                w={"auto"}
                 h={"full"}
               />
             </Flex>

diff --git a/webapp/src/pages/index.tsx b/webapp/src/pages/index.tsx
@@ -50,30 +50,6 @@ const referentItems: { name: string; image: string }[] = [
   { name: "Je suis à l'EPIDE", image: "/images/referent/epide.png" },
 ];
 
-const partnersList = [
-  {
-    name: "Deezer",
-    img: "/images/landing/partners/deezer.png",
-    promo_label: "-50%",
-    imgWidth: "35px",
-    imgHeight: "42.5px",
-  },
-  {
-    name: "AXA",
-    img: "/images/landing/partners/axa.png",
-    promo_label: "-100€",
-    imgWidth: "35px",
-    imgHeight: "35px",
-  },
-  {
-    name: "La poste mobile",
-    img: "/images/landing/partners/la-poste-mobile.png",
-    promo_label: "-10€",
-    imgWidth: "45px",
-    imgHeight: "35px",
-  },
-];
-
 const offersList = [
   {
     title_particle: "un cinéma",