Resolve "refactor: HomepageFeatures"

Closes #92 (closed)

src/components/HomepageFeatures.js

@@ -2,56 +2,56 @@ import React from "react";
 import clsx from "clsx";
 import styles from "./HomepageFeatures.module.css";
 import useBaseUrl from "@docusaurus/useBaseUrl";
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
 
 const FeatureList = [
-      {
-      id: 5,
-      title: "Le\u00A0SSO\u00A0🔑",
-      svg: "hello.png",
-      alt: "Kermit, sortant de sa cachette",
-      description: "Authentifiez-vous une bonne fois pour toute !"
-    },  
-    {
-      id: 1,
-      title: "Le\u00A0Lab\u00A0🧪",   
-      svg: "chemistry.svg",
-      alt: "Kermit manipule du matériel de laboratoire",
-      description:"Gérer vos projets, héberger votre code et collaborer autour de Git", 
-    },
-    {
-      id: 2,
-      title: "La\u00A0CI\u00A0🔁",
-      svg: "rainbow.svg",
-      alt: "Kermit pose devant un arc-en-ciel",
-      description: "Des applications qui passent tous les tests grâce aux fonctionnalités de Gitlab-CI"
-    },
-    {
-      id: 4,
-      title: "Les\u00A0Pages\u00A0🔖",
-      svg: "read-smile.svg",
-      alt: "Kermit porte des lunettes rondes et lit un livre",
-      description: "Publier vos sites, blog ou documetation, ou n'importe quel site statique sur nos GitLab pages"
-    },
-    {
-      id: 3,
-      title: "Le\u00A0Chat\u00A0💬",
-      svg: "selfie.svg",
-      alt: "Kermit prend un selfie",
-      description: "Un chat intégré pour communiquer autour du code… juste à côté du code"
-    },
-    {
-      id: 6,
-      title: "La\u00A0communauté\u00A0🍺",
-      svg: "beer.png",
-      alt: "Kermit faisant un clin d'oeil, une chope à la main",
-      description: "Une communauté Git pour solutionner vos pépins rapidement"
-    }
-  ];
+  {
+    id: 5,
+    title: "Le\u00A0SSO\u00A0🔑",
+    svg: "hello.png",
+    alt: "Kermit, sortant de sa cachette",
+    description: "Authentifiez-vous une bonne fois pour toute !"
+  },  
+  {
+    id: 1,
+    title: "Le\u00A0Lab\u00A0🧪",   
+    svg: "chemistry.svg",
+    alt: "Kermit manipule du matériel de laboratoire",
+    description:"Gérer vos projets, héberger votre code et collaborer autour de Git", 
+  },
+  {
+    id: 2,
+    title: "La\u00A0CI\u00A0🔁",
+    svg: "rainbow.svg",
+    alt: "Kermit pose devant un arc-en-ciel",
+    description: "Des applications qui passent tous les tests grâce aux fonctionnalités de Gitlab-CI"
+  },
+  {
+    id: 4,
+    title: "Les\u00A0Pages\u00A0🔖",
+    svg: "read-smile.svg",
+    alt: "Kermit porte des lunettes rondes et lit un livre",
+    description: "Publier vos sites, blog ou documetation, ou n'importe quel site statique sur nos GitLab pages"
+  },
+  {
+    id: 3,
+    title: "Le\u00A0Chat\u00A0💬",
+    svg: "selfie.svg",
+    alt: "Kermit prend un selfie",
+    description: "Un chat intégré pour communiquer autour du code… juste à côté du code"
+  },
+  {
+    id: 6,
+    title: "La\u00A0communauté\u00A0🍺",
+    svg: "beer.png",
+    alt: "Kermit faisant un clin d'oeil, une chope à la main",
+    description: "Une communauté Git pour solutionner vos pépins rapidement"
+  }
+];
 
 
-export default function HomepageFeaturesTab() {
+export default function HomepageFeatures() {
   return (
     <section className="sections container" id="features">   
       <h2 className={clsx("text--center")}>Optimisez votre manière de façonner vos applications
@@ -63,19 +63,19 @@ export default function HomepageFeaturesTab() {
         </p> 
       </div>
       <div>
-      <Tabs className={styles.tabsElement}>
-        {FeatureList.map((em) => (
-          <TabItem className={clsx("text--center")} value={em.title} label={em.title}>
+        <Tabs className={styles.tabsElement}>
+          {FeatureList.map((em) => (
+            <TabItem key={em.id} className={clsx("text--center")} value={em.title} label={em.title}>
               <div className={styles.rowDisplay}>
                 <img src={useBaseUrl("img/HomepageFeatures/" + em.svg)} alt={em.alt} className={styles.tabImages}/>
                 <p className={styles.textDisplay}> {em.description} </p>
               </div>
-          </TabItem>
-        ))}
-      </Tabs>
+            </TabItem>
+          ))}
+        </Tabs>
       </div>
 
-  </section>
+    </section>
 
   );
 }