Carousselle des produits vedettes et search bar reconstitué

GrossesMitaines/grosses-mitaines-ui/package-lock.json

@@ -19,6 +19,7 @@
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.4.1",
         "react-scripts": "5.0.1",
+        "react-transition-group": "^4.4.5",
         "web-vitals": "^2.1.4"
       }
     },

GrossesMitaines/grosses-mitaines-ui/package.json

@@ -14,6 +14,7 @@
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.4.1",
     "react-scripts": "5.0.1",
+    "react-transition-group": "^4.4.5",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

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>

GrossesMitaines/grosses-mitaines-ui/src/index.js

@@ -2,8 +2,7 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 import 'font-awesome/css/font-awesome.min.css'
 import 'bootstrap/dist/css/bootstrap.min.css'
-
-import './site.css'
+import './stylesheets/site.css'
 import App from './components/App'
 
 const container = document.getElementById('root')

GrossesMitaines/grosses-mitaines-ui/src/pages/Home.js

@@ -5,14 +5,37 @@ import FeatuerdList from "../components/FeaturedList";
 
 const Home = () => {
 
+    const products = [
+        {
+            "title": "Ceinture flèchée",
+            "description": "Pour faire votre propre bonhomme de 1837, comme dans le bon vieux temps.",
+            "price": "85,86",
+            "imageUrl":"/images/ceintureflechee.jpg"
+        },
+        {
+            "title": "Pantoufles du Canadien en Phentex",
+            "description": "Parce que ça sent la coupe!",
+            "price": "15,64",
+            "imageUrl":"/images/pantouflesCH.jpg"
+        },
+        {
+            "title": "Jean-Luc Mongrain",
+            "description": "On ne lui ferait pas mal, en tout cas!!",
+            "price": "1453,12",
+            "imageUrl":"/images/jeanlucmongrain.jpg"
+        }
+    ];
+
     useEffect(() => {
         document.title = 'Maison';
     });
 
     return (
         <>
-            <ResearchBar/>
-            <FeatuerdList/>
+            <ResearchBar />
+            <FeatuerdList
+                products={products}
+            />
             Maison
         </>
     );

GrossesMitaines/grosses-mitaines-ui/src/pages/Layout.js

@@ -1,5 +1,5 @@
 import React from "react";
-import {Outlet} from "react-router-dom";
+import { Outlet } from "react-router-dom";
 import Navbar from "../components/Navbar";
 import Footer from "../components/Footer";
 
@@ -8,7 +8,7 @@ const Layout = () => {
     <>
       <Navbar />
       <Outlet />
-      <Footer/>
+      <Footer />
     </>
   );
 };

GrossesMitaines/grosses-mitaines-ui/src/site.css

@@ -1,112 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400&display=swap');
-
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-body {
-  font-family: 'Poppins', sans-serif;
-}
-
-.container {
-  max-width: 500px;
-  margin: 30px auto;
-  overflow: auto;
-  min-height: 300px;
-  border: 1px solid steelblue;
-  padding: 30px;
-  border-radius: 5px;
-}
-
-.header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 20px;
-}
-
-.btn {
-  display: inline-block;
-  background: #000;
-  color: #fff;
-  border: none;
-  padding: 10px 20px;
-  margin: 5px;
-  border-radius: 5px;
-  cursor: pointer;
-  text-decoration: none;
-  font-size: 15px;
-  font-family: inherit;
-}
-
-.btn:focus {
-  outline: none;
-}
-
-.btn:active {
-  transform: scale(0.98);
-}
-
-.btn-block {
-  display: block;
-  width: 100%;
-}
-
-.task {
-  background: #f4f4f4;
-  margin: 5px;
-  padding: 10px 20px;
-  cursor: pointer;
-}
-
-.task.reminder {
-  border-left: 5px solid green;
-}
-
-.task h3 {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.add-form {
-  margin-bottom: 40px;
-}
-
-.form-control {
-  margin: 20px 0;
-}
-
-.form-control label {
-  display: block;
-}
-
-.form-control input {
-  width: 100%;
-  height: 40px;
-  margin: 5px;
-  padding: 3px 7px;
-  font-size: 17px;
-}
-
-.form-control-check {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.form-control-check label {
-  flex: 1;
-}
-
-.form-control-check input {
-  flex: 2;
-  height: 20px;
-}
-
-footer {
-  margin-top: 30px;
-  text-align: center;
-}

GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css

@@ -0,0 +1,88 @@
+body {
+    background-image: url('/public/images/blured_wool_carpet.png');
+    background-color: gray;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    background-size: cover;
+}
+
+.research-container {
+    /* border: black solid 1px; */
+    padding: 4px 6px 4px 6px;
+    background-color: purple;
+    box-shadow: 2px 3px rgba(0, 0, 0, .25);
+    border-radius: 5px;
+    height: 40px;
+    margin:auto;
+    margin-bottom: 5px;
+    width: 90%;
+}
+
+.research-input {
+    height: 100%;
+    width: 89%;
+}
+
+.research-btn {
+    margin-left: 1%;
+    border-radius: 5px;
+    width: 10%;
+    height: 90%;
+}
+
+
+.featured-lst {
+    width: 100%;
+}
+
+.featured-itm {
+    background-color: beige;
+    border-radius: 10px;
+    height: 500px;
+}
+
+.featured-img {
+    border: 5px purple double;
+    border-radius: 10px;
+    height: 100%;
+    margin-bottom: 75%;
+    width: auto;
+    max-width: 50%;
+}
+
+.featured-info {
+    border: 1px black solid;
+    color: black;
+    text-align: right;
+    left: 55%;
+    right: 12%;
+    bottom: 25%;
+    top: 25%;
+    padding-right: 2%;
+    box-shadow: 5px 10px rgba(0, 0, 0, .5);
+}
+
+.featured-prc {
+    margin-left: 50%;
+    padding-right: 10px;
+    background-color: plum;
+}
+
+/* specification pour les écrans plus petits / cells */
+@media (max-width:450px) {
+    .featured-img {
+        border: 5px purple double;
+        width: 100%;
+        max-width: 100%;
+        height: auto;
+        margin: auto;
+    }
+
+    .featured-info {
+        left: 12%;
+        top: auto;
+        bottom: 10%;
+        padding-right: 20px;
+        background-color: rgba(255, 255, 255, .75);
+    }
+}