refactor: refactor of HomepagePromises component for more versatility

src/components/Features/Features.js

@@ -4,21 +4,21 @@ import useBaseUrl from "@docusaurus/useBaseUrl";
 import Tabs from "@theme/Tabs";
 import TabItem from "@theme/TabItem";
 
+/* eslint-disable react/prop-types */
 export default function Features(props) {
-  const list = props.list
   return (
     <div>
-    <Tabs className="tabs-element">
-      {list.map((em) => (
-        <TabItem key={em.id} className={clsx("text--center")} value={em.title} label={em.title}>
-          <div className="tab-row-display">
-            <img src={useBaseUrl("img/components/HomepageFeatures/" + em.svg)} alt={em.alt} className="tab-images"/>
-            <p className="tab-text-display"> {em.description} </p>
-          </div>
-        </TabItem>
-      ))}
-    </Tabs>
-  </div>
-  )
+      <Tabs className="tabs-element">
+        {props.list.map((em, idx) => (
+          <TabItem key={idx} className={clsx("text--center")} value={em.title} label={em.title}>
+            <div className="tab-row-display">
+              <img src={useBaseUrl("img/components/HomepageFeatures/" + em.svg)} alt={em.alt} className="tab-images"/>
+              <p className="tab-text-display"> {em.description} </p>
+            </div>
+          </TabItem>
+        ))}
+      </Tabs>
+    </div>
+  );
 
 }

src/components/Features/HomepageFeatures.js

 import React from "react";
 import clsx from "clsx";
 import styles from "./HomepageFeatures.module.css";
-import Features from "./Features"
+import Features from "./Features";
 
 
 const FeatureList = [

src/components/HomepagePromises.module.css

-/* stylelint-disable docusaurus/copyright-header */
-.promise-svg {
-  height: 64px;
-  width: auto;
-}

src/components/HomepagePromises.js → src/components/Promises/HomepagePromises.js

 import React from "react";
-import clsx from "clsx";
 import styles from "./HomepagePromises.module.css";
 
-import bouclier from "@site/static/img/components/HomepagePromises/bouclier.svg"
-import rgpd from "@site/static/img/components/HomepagePromises/rgpd.svg"
-import liberte from "@site/static/img/components/HomepagePromises/liberte.svg"
+import bouclier from "@site/static/img/components/HomepagePromises/bouclier.svg";
+import rgpd from "@site/static/img/components/HomepagePromises/rgpd.svg";
+import liberte from "@site/static/img/components/HomepagePromises/liberte.svg";
+import Promises from "./Promises";
+
+const PromiseSectionTitle = "Faites la différence";
 
 const PromiseList = [
   {
@@ -39,29 +41,14 @@ const PromiseList = [
   },
 ];
 
-// eslint-disable-next-line
-function Promise({Svg, alt, title, description}) {
-  return (
-    <div className={clsx("col col--4")}>
-      <div className="text--center">
-        <Svg className={styles["promise-svg"]} alt={alt} />
-      </div>
-      <div className="text--center padding-horiz--md">
-        <h3>{title}</h3>
-        <p>{description}</p>
-      </div>
-    </div>
-  );
-}
-
 export default function HomepagePromises() {
   return (
     <div className="row-overflow">
-      <h2 className="promise-title">Faites la différence</h2>
+      <h2 className={styles["homepage-promise-title"]}> {PromiseSectionTitle} </h2>
       <section className="section-promises">    
         <div className="row">
           {PromiseList.map((props, idx) => (
-            <Promise key={idx} {...props} />
+            <Promises key={idx} {...props} />
           ))}
         </div>   
       </section>

src/components/Promises/HomepagePromises.module.css

+
+.homepage-promise-title {
+  display: flex;
+  justify-content: center;
+}

src/components/Promises/Promises.js

+import React from "react";
+import clsx from "clsx";
+
+// eslint-disable-next-line
+export default function Promises({Svg, alt, title, description}) {
+  return (
+    <div className={clsx("col col--4")}>
+      <div className="text--center">
+        <Svg className="promise-svg" alt={alt} />
+      </div>
+      <div className="text--center padding-horiz--md">
+        <h3>{title}</h3>
+        <p>{description}</p>
+      </div>
+    </div>
+  );
+}

src/css/custom.css

@@ -225,8 +225,8 @@ ul {
   }
 }
 
-.promise-title {
-  display: flex;
-  justify-content: center;
-  text-align: center;
+/* stylelint-disable docusaurus/copyright-header */
+.promise-svg {
+  height: 64px;
+  width: auto;
 }

src/pages/index.js

@@ -2,12 +2,6 @@ import React from "react";
 import Layout from "@theme/Layout"; 
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import styles from "./index.module.css";
-<<<<<<< HEAD
-=======
-import HomepagePromises from "../components/HomepagePromises";
-import HomepageFeatures from "../components/Features/HomepageFeatures";
-import CarouselLibre from "@site/src/components/Carousel/CarouselLibre";
->>>>>>> 8ea9bd0 (refactor: refactor of HomepageFeatures component for more versatility)
 import Link from "@docusaurus/Link";
 import HomepageResults from "@site/src/components/HomepageResults";
 import HomepagePromises from "@site/src/components/HomepagePromises";