refactor: refactor of caroussel components to avoid code repeatition

external composant for image/svg called in the caroussel element

src/components/Carousel.js

@@ -5,52 +5,42 @@ import "slick-carousel/slick/slick.css";
 import "slick-carousel/slick/slick-theme.css";
 import useBaseUrl from "@docusaurus/useBaseUrl";
 
+function Logo({img, svg, alt}) {
+  if (img) {
+    return (
+      <> 
+        <img src={useBaseUrl(img)} alt={alt} className="carousel_img" />
+      </>
+    );
+  }
+  else if (svg) {
+    return (
+      <svg alt={alt}>
+        {svg}
+      </svg>
+    );
+  }
+}
+
 function CarouselElement({name, img, svg, link, alt}) {
   return (
     <div className="carousel_box">
       {(() => {
-        if (typeof link !== "undefined") {
+        if (link) {
           return (
             <a href={link} target="_blank" rel="noopener noreferrer">
-              {(() => {
-                if (typeof img !== "undefined") {
-                  return (
-                    <div> 
-
-                      <img src={useBaseUrl(img)} alt={alt} className="carousel_img" />
-                    </div>
-                  );
-                }
-                else if (typeof svg !== "undefined") {
-                  return (
-                    <svg alt={alt}>
-                      {svg}
-                    </svg>
-                  );
-                }
-              })()}   
+              <Logo img={img} svg={svg} alt={alt}/>
             </a>
           );
         }
         else {
-          if (typeof img !== "undefined") {
-            return (
-              <div> 
-                <img src={useBaseUrl(img)} alt={alt} className="carousel_img" />
-              </div>
-            );
-          }
-          else if (typeof svg !== "undefined") {
-            return (
-              <svg alt={alt}>
-                {svg}
-              </svg>
-            );
-          } 
+          return (
+               <Logo img={img} svg={svg} alt={alt}/>
+          )         
         }
       })()}   
       {(() => {
-        if (typeof name !== "undefined") {
+        if (name) {
           return (
             <h6 className="carousel_title">{name}</h6>
           ); 

src/components/CarouselLibre.js

@@ -23,7 +23,7 @@ const CarouselList = [
   {
     img: "/img/components/CarouselLibre/debian_logo.png",
     name: "Debian",
-    alt: "Pourquoi nous avons choisi Debian ?"
+    alt: "Pourquoi nous avons choisi Debian ?",
   },
   {
     svg: <svg version="1.0" encoding="utf-8" viewBox="0 0 294.451 296.514" xmlns="http://www.w3.org/2000/svg">