Carousselle des produits vedettes et search bar reconstitué

GrossesMitaines/grosses-mitaines-ui/src/components/FeaturedCard.js

@@ -1,11 +0,0 @@
-
-const FeaturedCard = () => {
-
-    return(
-        <div className="border border-primary">
-            <h1 className="text-primary">FeaturedCard</h1>
-        </div>
-    );
-}
-
-export default FeaturedCard;

GrossesMitaines/grosses-mitaines-ui/src/components/FeaturedList.js

@@ -1,11 +1,23 @@
-import FeaturedCard from "./FeaturedCard";
+import { Carousel } from "react-bootstrap";
+const FeaturedList = ({ products }) => {
 
-const FeaturedList = () => {
-
-    return(
-        <div>
-            <FeaturedCard/>
-        </div>
+    return (
+        <Carousel variant="dark" className="featured-lst">
+            {products.map((product) => (
+                <Carousel.Item className="featured-itm">
+                    <img
+                        className="featured-img"
+                        src={product.imageUrl}
+                    />
+                    <Carousel.Caption className="featured-info">
+                        <h3>{product.title}</h3>
+                        <p>{product.description}</p>
+                        <h5>Seulement</h5>
+                        <h4 className="featured-prc">{product.price}$+tx</h4>
+                    </Carousel.Caption>
+                </Carousel.Item>
+            ))}
+        </Carousel>
     );
 }
 

GrossesMitaines/grosses-mitaines-ui/src/components/ResearchBar.js

@@ -3,9 +3,9 @@
 const ResearchBar = () => {
 
     return (
-        <div>
-            <input placeholder="Rechercher..."></input>
-            <button>
+        <div className="research-container">
+            <input className="research-input" placeholder="Rechercher..."></input>
+            <button className="research-btn">
                 <div className="fa fa-search"/>
             </button>
         </div>