Merge pull request #327 from ungdev/dev

fix: partners
ungdev · Nov 13, 2023 · 7a92b57 · 7a92b57
2 parents 090e3aa + d62b63a
commit 7a92b57
Showing 4 changed files with 27 additions and 9 deletions.
diff --git a/src/components/Partners.module.scss b/src/components/Partners.module.scss
@@ -10,6 +10,12 @@
     height: 60px;
     object-fit: contain;
   }
+
+  a {
+    text-decoration: none;
+    display: flex;
+    align-items: stretch;
+  }
 }
 
 @media screen and (max-width: 700px) {

diff --git a/src/components/Partners.tsx b/src/components/Partners.tsx
@@ -2,7 +2,7 @@
 import styles from './Partners.module.scss';
 import { useAppDispatch, useAppSelector } from '@/lib/hooks';
 import { useEffect } from 'react';
-import { fetchPartners, PartnersAction } from '@/modules/partners';
+import { fetchPartners } from '@/modules/partners';
 import { Partner } from '@/types';
 import { type Action } from '@reduxjs/toolkit';
 import { getPartnerLogoLink } from '@/utils/uploadLink';
@@ -13,7 +13,7 @@ import { Square } from './UI';
  */
 export default function Partners({ cards = false }: { cards?: boolean }) {
   const dispatch = useAppDispatch();
-  const partners = useAppSelector((state) => (state.partners as PartnersAction).partners);
+  const partners = useAppSelector((state) => state.partners.partners);
 
   useEffect(() => {
     if (!partners) {
@@ -25,10 +25,10 @@ export default function Partners({ cards = false }: { cards?: boolean }) {
     <div id="partners" className={styles.partners}>
       {!partners || partners.length === 0
         ? 'Chargement des partenaires...'
-        : partners?.map((partner: Partner, i: number) => (
-            <a key={i} href={partner.link} target="_blank">
+        : partners?.map((partner: Partner) => (
+            <a key={'partner-' + partner.id} href={partner.link} target="_blank">
               {cards ? (
-                <Square imgSrc={getPartnerLogoLink(partner.id)} alt={partner.name} text={partner.description} />
+                <Square imgSrc={getPartnerLogoLink(partner.id)} alt={partner.name} text={partner.description} long />
               ) : (
                 <img src={getPartnerLogoLink(partner.id)} alt={`Logo ${partner.name}`} />
               )}

diff --git a/src/components/UI/Square.module.scss b/src/components/UI/Square.module.scss
@@ -16,12 +16,21 @@
   text-align: center;
   gap: 1rem;
 
+  &.long {
+    width: clamp(300px, 100%, 450px);
+    max-width: 450px;
+    min-height: 300px;
+    height: initial;
+    padding: 1rem;
+  }
+
   .text {
-    font-size: 1.5rem;
+    font-size: 0.925rem;
     font-weight: 500;
     line-height: 1.5;
-    color: $primary-color;
-    text-decoration: none;
+    color: white !important;
+    text-decoration: none !important;
+    white-space: pre-wrap;
   }
 
   &.dark {

diff --git a/src/components/UI/Square.tsx b/src/components/UI/Square.tsx
@@ -13,6 +13,7 @@ const Square = ({
   alt = '',
   replacementText = null,
   text = '',
+  long = false,
 }: {
   /** Source of the image to display above */
   imgSrc?: string | null;
@@ -26,9 +27,11 @@ const Square = ({
   replacementText?: string | null;
   /** text */
   text?: string;
+  /** long */
+  long?: boolean;
 }) => {
   return (
-    <div className={`${styles.square} ${className}`} onClick={onClick}>
+    <div className={`${styles.square} ${className} ${long ? styles.long : ''}`} onClick={onClick}>
       {imgSrc && <img className="lazyload" alt={alt} data-src={imgSrc} />}
       {!imgSrc && replacementText && <div className={styles.replacementText}>{replacementText}</div>}
       {text && <div className={styles.text}>{text}</div>}