From 9b36e697ca82363f24bfe8608f293d1473674100 Mon Sep 17 00:00:00 2001
From: Plumtree3D <ham.in.kneesocks@gmail.com>
Date: Mon, 26 Sep 2022 17:23:46 +0200
Subject: [PATCH] refactor: :art: refactor of caroussel components to avoid
code repeatition
external composant for image/svg called in the caroussel element
---
src/components/Carousel.js | 56 ++++++++++++++-------------------
src/components/CarouselLibre.js | 2 +-
2 files changed, 24 insertions(+), 34 deletions(-)
diff --git a/src/components/Carousel.js b/src/components/Carousel.js
index 60fac83..9a9c07b 100644
--- a/src/components/Carousel.js
+++ b/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>
);
diff --git a/src/components/CarouselLibre.js b/src/components/CarouselLibre.js
index d849a48..0131a06 100644
--- a/src/components/CarouselLibre.js
+++ b/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">
--
GitLab