[DELETE] app index.css

package.json

@@ -13,6 +13,7 @@
     "@fortawesome/fontawesome-free": "^6.4.0",
     "bootstrap": "^5.2.3",
     "react": "^18.2.0",
+    "react-bootstrap": "^2.7.4",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.11.0"
   },

src/App.jsx

@@ -4,8 +4,6 @@ import Navbar from "./components/Navbar/Navbar";
 import Home from "./components/Home/Home";
 import Footer from "./components/Footer/Footer";
 
-import "./App.css";
-
 function App() {
   return (
     <BrowserRouter>

src/components/Footer/Footer.jsx

@@ -7,7 +7,7 @@ export default function Footer() {
         <footer className="bg-secondary text-center text-lg-start">
           <div className="text-dark text-center m-0 p-3">
             © 2023 Copyright&nbsp;|&nbsp;
-            <a className="text-dark" href="http://127.0.0.1:5173/">
+            <a className="text-dark" href="/">
               BookReserve
             </a>
           </div>

src/components/Home/Home.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, {useState} from "react";
 
 import Toolbar from "../Toolbar/Toolbar";
 import ButtonToUpdate from "../Button/ButtonToUpdate";
@@ -8,9 +8,12 @@ import Error from "../Handle/Error";
 import Loading from "../Handle/Loading";
 
 import {useFetch} from "../../useFetch";
+import MyVerticallyCenteredModal from "../Modal/Modal";
 
 export default function Home() {
   const {data, loading, error} = useFetch("https://rickandmortyapi.com/api/character");
+  const [modalShow, setModalShow] = useState(true);
+
   return (
     <>
       <Toolbar />
@@ -34,6 +37,8 @@ export default function Home() {
           </div>
         ))}
       </div>
+
+      <MyVerticallyCenteredModal show={modalShow} onHide={() => setModalShow(false)} />
     </>
   );
 }

src/components/Modal/Modal.jsx

@@ -0,0 +1,20 @@
+import Button from "react-bootstrap/Button";
+import Modal from "react-bootstrap/Modal";
+
+export default function MyVerticallyCenteredModal(props) {
+  return (
+    <Modal {...props} size="lg" aria-labelledby="contained-modal-title-vcenter" centered>
+      <Modal.Header closeButton>
+        <Modal.Title id="contained-modal-title-vcenter">Modal heading</Modal.Title>
+      </Modal.Header>
+      <Modal.Body>
+        <h4>Centered Modal</h4>
+        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+      </Modal.Body>
+      <Modal.Footer>
+        <Button variant="secondary">Cerrar</Button>
+        <Button variant="primary">Guardar</Button>
+      </Modal.Footer>
+    </Modal>
+  );
+}

src/main.jsx

@@ -1,7 +1,6 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App.jsx";
-import "./index.css";
 
 //bootstrap and font-awesome
 import "bootstrap/dist/css/bootstrap.min.css";