Composants
Les composants sont des extraits de code .js ou .jsx indépendants et réutilisables, ils se situent dans src/components/.
Liste de composants
Highlight.js
Le composant Highlight sert à surligner un élément, en particulier du texte. Il nécéssite les props color qui déterminera la couleur du surlignage et children qui doit accueillir le texte à surligner.
TextRight.js
Le composant TextRight sert à afficher une image à la gauche de son bloc enfant, avec largeur égale. Il nécéssite les props img qui sera l'image à afficher à gauche du bloc enfant et children qui sera le bloc enfant d’éléments HTML.
Carousel.js
Le composant Carousel permet de générer un carrousel en utilisant le slider de [React Slick] (https://react-slick.neostack.com/).
Le composant peut recevoir 5 props. name (optionnel) sera le texte affiché sous l'image, link (optionnel) permet de rendre l'image cliquable pour ouvrir un lien dans un nouvel onglet, alt sera le texte alternatif à l'image ou au svg.
Concernant l'image, il peut s'agir d'un fichier (png, svg, jpeg...) avec le props img ou de svg inline en html avec le props svg (ne pas mettre de chemin vers un fichier svg avec le props svg!). Si les deux arguments sont fournis, seul img sera pris en compte.
CarouselLibre.js
Le composant CarouselLibre est utilisé sur la page d'accueil pour afficher un carrousel des logiciels libres (FLOSS) utilisés par Froggit, il utilise le composant générique Carousel
Afin que les logos de FLOSS unis (par exemple blancs ou noirs) restent bien visibles peu importe le thème, les intégrer en SVG inline dans le props svg et penser à supprimer les valeurs "fill". Cela leur permettra de prendre la couleur du texte selon le thème.
HomepagePromises.js
Le composant HomepagePromises est utilisé sur la page d'accueil pour afficher les promesses de Froggit (section À vous de faire la différence).
il renvoie une section constituée d'un titre central puis d'une liste React (PromiseList) affichée en ligne.
Les éléments Promise de la liste sont affichés en colonne et sont composés d'un titre, une image SVG et une description. Le composant Promise prendra respectivement les props Svg, title et description.
HomepageFeatures.js
Le composant HomepageFeatures affiche les fonctionnalités de Froggit sur la page d'accueil.