Make HomeSection component more generic

GeotrekCE · Mar 28, 2024 · d215265 · d215265
1 parent 1ac687f
commit d215265
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 29 deletions.
diff --git a/frontend/src/components/pages/home/Home.tsx b/frontend/src/components/pages/home/Home.tsx
@@ -56,10 +56,12 @@ const HomeUI: React.FC = () => {
             .filter(({ results }) => results.length > 0)
             .map(({ titleTranslationId, iconUrl, results }) => (
               <HomeSection
+                className="mx-4 desktop:mx-10percent"
                 title={intl.formatMessage({ id: titleTranslationId })}
                 iconUrl={iconUrl}
                 key={titleTranslationId}
                 results={results}
+                asColumn
               />
             ))}
           {homeBottom !== undefined && (

diff --git a/frontend/src/components/pages/home/components/HomeSection/HomeSection.tsx b/frontend/src/components/pages/home/components/HomeSection/HomeSection.tsx
@@ -3,34 +3,45 @@ import { ResultCard } from 'components/pages/search/components/ResultCard';
 import { getHoverId } from 'components/pages/search/utils';
 import { ActivitySuggestion } from 'modules/activitySuggestions/interface';
 import SVG from 'react-inlinesvg';
-import styled from 'styled-components';
+import { cn } from 'services/utils/cn';
 import { optimizeAndDefineColor } from 'stylesheet';
 
 export interface HomeSectionProps {
   title: string;
   iconUrl: string;
   results: ActivitySuggestion['results'];
+  className?: string;
+  asColumn?: boolean;
 }
 
-export const HomeSection: React.FC<HomeSectionProps> = ({ title, iconUrl, results }) => {
+export const HomeSection: React.FC<HomeSectionProps> = ({
+  asColumn = false,
+  title,
+  iconUrl,
+  results,
+  className,
+}) => {
   return (
-    <div id={'home_section'} className={`flex flex-col`}>
-      <h2
-        id="home_sectionTitle"
-        className="flex border-t border-greySoft border-solid pt-4 desktop:pt-10 mb-2 desktop:mb-6 mx-4 desktop:mx-10percent"
-      >
-        <SVG
-          src={iconUrl}
-          preProcessor={optimizeAndDefineColor()}
-          className="h-10 mr-2 desktop:mr-3"
-        />
-        <span className="mt-1 desktop:mt-0 text-H2 desktop:text-H2 font-bold">{title}</span>
-      </h2>
-      <ScrollContainer className="flex p-5 overflow-scroll desktop:overflow-auto desktop:mx-10percent desktop:px-0 desktop:grid desktop:grid-cols-3 desktop:gap-3">
+    <div id={'home_section'} className={cn('custo-suggestions flex flex-col', className)}>
+      {title && (
+        <h2
+          id="home_sectionTitle"
+          className="custo-suggestions-title flex border-t border-greySoft border-solid pt-4 desktop:pt-10 mb-2 desktop:mb-6"
+        >
+          <SVG
+            src={iconUrl}
+            preProcessor={optimizeAndDefineColor()}
+            className="h-10 mr-2 desktop:mr-3"
+            aria-hidden
+          />
+          <span className="mt-1 desktop:mt-0 text-H2 desktop:text-H2 font-bold">{title}</span>
+        </h2>
+      )}
+      <div className="custo-suggestions-content flex px-5 overflow-scroll desktop:overflow-auto desktop:px-0 desktop:grid desktop:grid-cols-3 gap-5">
         {results.map(e => {
           return (
             <ResultCard
-              asColumn
+              asColumn={asColumn}
               type={e.type}
               key={e.name}
               id={e.id}
@@ -43,22 +54,11 @@ export const HomeSection: React.FC<HomeSectionProps> = ({ title, iconUrl, result
               badgeName={e.category?.label}
               informations={e.informations}
               redirectionUrl={generateDetailsUrlFromType(e.type, e.id, e.name)}
-              className="my-4 desktop:my-6 desktop:mx-1" // Height is not limited to let the card grow with long text & informations. Most photos are not vertical, and does not have to be restrained.
+              className="my-4 desktop:my-6 desktop:mx-1 min-w-70 max-w-70 desktop:max-w-none shrink-0"
             />
           );
         })}
-      </ScrollContainer>
+      </div>
     </div>
   );
 };
-
-const ScrollContainer = styled.div`
-  @media (max-width: 1024px) {
-    & > * {
-      flex: auto;
-      max-width: 300px;
-      min-width: 300px;
-      margin-right: 20px;
-    }
-  }
-`;