add footer

DhananjayThomble · Feb 11, 2023 · 65a2150 · 65a2150
1 parent 501582d
commit 65a2150
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 20 deletions.
diff --git a/react-frontend/src/App.js b/react-frontend/src/App.js
@@ -28,7 +28,7 @@ function App() {
             <Route path="*" element={<Home />} />
             <Route path={"/history"} element={<History />} />
           </Routes>
-          {/*<Footer />*/}
+          <Footer />
         </UserContext.Provider>
       </BrowserRouter>
     </div>

diff --git a/react-frontend/src/components/Footer.js b/react-frontend/src/components/Footer.js
@@ -1,19 +1,16 @@
 import React from "react";
+import { Container } from "react-bootstrap";
 
 function Footer(props) {
   return (
     // footer using react-bootstrap
-    <div>
-      <footer className="footer">
-        <div className="container">
-          <div className="row justify-content-center">
-            <div className="col-auto">
-              <p className="text-muted">Developed By Dhananjay Thomble</p>
-            </div>
-          </div>
-        </div>
-      </footer>
-    </div>
+    <Container
+      fluid
+      className="text-center bg-secondary fixed-bottom
+                    text-white text-uppercase p-2"
+    >
+      URL Shortener App by <b> Dhananjay </b>
+    </Container>
   );
 }
 

diff --git a/react-frontend/src/components/History.js b/react-frontend/src/components/History.js
@@ -39,7 +39,7 @@ function History() {
   };
 
   return (
-    <Container className={"pt-4"}>
+    <Container className={"pb-5"}>
       <ToastContainer
         position="top-center"
         autoClose={3000}
@@ -52,19 +52,19 @@ function History() {
         pauseOnHover
         theme="light"
       />
-      {history.map((data) => {
-        return (
-          <Row className={"my-1"}>
-            <Col>
+      <Row className={"my-1"}>
+        {history.map((data) => {
+          return (
+            <Col md={6} className={"p-1"}>
               <HistoryCard
                 shortUrl={data.shortUrl}
                 originalUrl={data.originalUrl}
                 visitCount={data.visitCount || 0}
               />
             </Col>
-          </Row>
-        );
-      })}
+          );
+        })}
+      </Row>
     </Container>
   );
 }