basic bootstrap and fa stuff

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

@@ -12,6 +12,7 @@
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
         "bootstrap": "^5.2.1",
+        "font-awesome": "^4.7.0",
         "react": "^18.2.0",
         "react-bootstrap": "^2.5.0",
         "react-devtools": "^4.26.0",
@@ -8604,6 +8605,14 @@
         }
       }
     },
+    "node_modules/font-awesome": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz",
+      "integrity": "sha512-U6kGnykA/6bFmg1M/oT9EkFeIYv7JlX3bozwQJWiiLz6L0w3F5vBVPxHlwyX/vtNq1ckcpRKOB9f2Qal/VtFpg==",
+      "engines": {
+        "node": ">=0.10.3"
+      }
+    },
     "node_modules/fork-ts-checker-webpack-plugin": {
       "version": "6.5.2",
       "resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-6.5.2.tgz",
@@ -24607,6 +24616,11 @@
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
       "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA=="
     },
+    "font-awesome": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz",
+      "integrity": "sha512-U6kGnykA/6bFmg1M/oT9EkFeIYv7JlX3bozwQJWiiLz6L0w3F5vBVPxHlwyX/vtNq1ckcpRKOB9f2Qal/VtFpg=="
+    },
     "fork-ts-checker-webpack-plugin": {
       "version": "6.5.2",
       "resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-6.5.2.tgz",

GrossesMitaines/grosses-mitaines-ui/package.json

@@ -7,6 +7,7 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "bootstrap": "^5.2.1",
+    "font-awesome": "^4.7.0",
     "react": "^18.2.0",
     "react-bootstrap": "^2.5.0",
     "react-devtools": "^4.26.0",

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

@@ -0,0 +1,11 @@
+
+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

@@ -0,0 +1,12 @@
+import FeaturedCard from "./FeaturedCard";
+
+const FeaturedList = () => {
+
+    return(
+        <div>
+            <FeaturedCard/>
+        </div>
+    );
+}
+
+export default FeaturedList;

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

@@ -3,10 +3,9 @@ import React from "react";
 const Footer = () => {
 
     return (
-        <>
+        <footer>
-            <br />
+            Footer
-            footer
+        </footer>
-        </>
     );
 }
 

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { BrowserRouter, Route, Link } from "react-router-dom";
+import { Link } from "react-router-dom";
 
 const Navbar = () => {
     return (

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

@@ -0,0 +1,15 @@
+
+
+const ResearchBar = () => {
+
+    return (
+        <div>
+            <input placeholder="Rechercher..."></input>
+            <button>
+                <div className="fa fa-search"/>
+            </button>
+        </div>
+    );
+}
+
+export default ResearchBar;

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

@@ -1,5 +1,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 App from './components/App'

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

@@ -1,5 +1,7 @@
 import React from "react";
 import { useEffect } from "react";
+import ResearchBar from "../components/ResearchBar";
+import FeatuerdList from "../components/FeaturedList";
 
 const Home = () => {
 
@@ -9,6 +11,8 @@ const Home = () => {
 
     return (
         <>
+            <ResearchBar/>
+            <FeatuerdList/>
             Maison
         </>
     );