From ce8eb4c922e2a877c3789cab4dd953fd21c989a9 Mon Sep 17 00:00:00 2001
From: Sifat Hossain <80267830+h-sifat@users.noreply.github.com>
Date: Wed, 7 Dec 2022 22:24:36 +0600
Subject: [PATCH] feat(components): add NavBar

---
 package-lock.json            | 73 +++++++++++++++++++++++++++++++++++-
 package.json                 |  5 ++-
 src/App.tsx                  |  5 +++
 src/components/Nav/index.tsx | 64 +++++++++++++++++++++++++++++++
 src/main.tsx                 |  7 +++-
 5 files changed, 150 insertions(+), 4 deletions(-)
 create mode 100644 src/App.tsx
 create mode 100644 src/components/Nav/index.tsx

diff --git a/package-lock.json b/package-lock.json
index 4bf2dd0..ffb71ed 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,9 +9,12 @@
       "version": "0.0.0",
       "dependencies": {
         "base-64": "^1.0.0",
+        "bootstrap": "^5.2.3",
         "handy-types": "^2.0.0",
         "react": "^18.2.0",
-        "react-dom": "^18.2.0"
+        "react-dom": "^18.2.0",
+        "react-icons": "^4.7.1",
+        "wouter": "^2.9.0"
       },
       "devDependencies": {
         "@types/base-64": "^1.0.0",
@@ -516,6 +519,16 @@
         "@jridgewell/sourcemap-codec": "1.4.14"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.6",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
+      "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==",
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@types/base-64": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@types/base-64/-/base-64-1.0.0.tgz",
@@ -592,6 +605,24 @@
       "resolved": "https://registry.npmjs.org/base-64/-/base-64-1.0.0.tgz",
       "integrity": "sha512-kwDPIFCGx0NZHog36dj+tHiwP4QMzsZ3AgMViUBKI0+V5n4U0ufTCUMhnQ04diaRI8EX/QcPfql7zlhZ7j4zgg=="
     },
+    "node_modules/bootstrap": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.3.tgz",
+      "integrity": "sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ],
+      "peerDependencies": {
+        "@popperjs/core": "^2.11.6"
+      }
+    },
     "node_modules/browserslist": {
       "version": "4.21.4",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.4.tgz",
@@ -1286,6 +1317,14 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-icons": {
+      "version": "4.7.1",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.7.1.tgz",
+      "integrity": "sha512-yHd3oKGMgm7zxo3EA7H2n7vxSoiGmHk5t6Ou4bXsfcgWyhfDKMpyKfhHR6Bjnn63c+YXBLBPUql9H4wPJM6sXw==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.14.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz",
@@ -1480,6 +1519,14 @@
           "optional": true
         }
       }
+    },
+    "node_modules/wouter": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/wouter/-/wouter-2.9.0.tgz",
+      "integrity": "sha512-cGi9miU5jgwNaybj4sfzY9ZVhU8EwFsncmi2yDvVbS2pL/yz8ZpAMMiELHr4j8w2NLStgI/ltqDluYvBwPhYoQ==",
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
     }
   },
   "dependencies": {
@@ -1837,6 +1884,12 @@
         "@jridgewell/sourcemap-codec": "1.4.14"
       }
     },
+    "@popperjs/core": {
+      "version": "2.11.6",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
+      "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==",
+      "peer": true
+    },
     "@types/base-64": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@types/base-64/-/base-64-1.0.0.tgz",
@@ -1904,6 +1957,12 @@
       "resolved": "https://registry.npmjs.org/base-64/-/base-64-1.0.0.tgz",
       "integrity": "sha512-kwDPIFCGx0NZHog36dj+tHiwP4QMzsZ3AgMViUBKI0+V5n4U0ufTCUMhnQ04diaRI8EX/QcPfql7zlhZ7j4zgg=="
     },
+    "bootstrap": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.3.tgz",
+      "integrity": "sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==",
+      "requires": {}
+    },
     "browserslist": {
       "version": "4.21.4",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.4.tgz",
@@ -2303,6 +2362,12 @@
         "scheduler": "^0.23.0"
       }
     },
+    "react-icons": {
+      "version": "4.7.1",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.7.1.tgz",
+      "integrity": "sha512-yHd3oKGMgm7zxo3EA7H2n7vxSoiGmHk5t6Ou4bXsfcgWyhfDKMpyKfhHR6Bjnn63c+YXBLBPUql9H4wPJM6sXw==",
+      "requires": {}
+    },
     "react-refresh": {
       "version": "0.14.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz",
@@ -2404,6 +2469,12 @@
         "resolve": "^1.22.1",
         "rollup": "^2.79.1"
       }
+    },
+    "wouter": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/wouter/-/wouter-2.9.0.tgz",
+      "integrity": "sha512-cGi9miU5jgwNaybj4sfzY9ZVhU8EwFsncmi2yDvVbS2pL/yz8ZpAMMiELHr4j8w2NLStgI/ltqDluYvBwPhYoQ==",
+      "requires": {}
     }
   }
 }
diff --git a/package.json b/package.json
index b106fa5..ba42da0 100644
--- a/package.json
+++ b/package.json
@@ -10,9 +10,12 @@
   },
   "dependencies": {
     "base-64": "^1.0.0",
+    "bootstrap": "^5.2.3",
     "handy-types": "^2.0.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-icons": "^4.7.1",
+    "wouter": "^2.9.0"
   },
   "devDependencies": {
     "@types/base-64": "^1.0.0",
diff --git a/src/App.tsx b/src/App.tsx
new file mode 100644
index 0000000..d99abc8
--- /dev/null
+++ b/src/App.tsx
@@ -0,0 +1,5 @@
+import { NavBar } from "./components/Nav";
+
+export function App() {
+  return <NavBar />;
+}
diff --git a/src/components/Nav/index.tsx b/src/components/Nav/index.tsx
new file mode 100644
index 0000000..9936041
--- /dev/null
+++ b/src/components/Nav/index.tsx
@@ -0,0 +1,64 @@
+import { Link } from "wouter";
+import { useState } from "react";
+import { BsSearch } from "react-icons/bs";
+import { GrTechnology } from "react-icons/gr";
+
+export interface NavBar_Argument {
+  onSearchClick?: () => void;
+}
+
+export function NavBar(arg: NavBar_Argument) {
+  const { onSearchClick = () => console.log("clicked") } = arg;
+
+  const [collapsed, setCollapsed] = useState(true);
+
+  let collapsibleClassNames = "collapse navbar-collapse";
+  if (!collapsed) collapsibleClassNames += " show";
+
+  return (
+    <nav className="navbar navbar-expand-lg bg-light">
+      <div className="container-fluid">
+        <Link className="navbar-brand fw-bold" href="/">
+          <GrTechnology size={"2rem"} /> Techland
+        </Link>
+
+        <button
+          type="button"
+          className="navbar-toggler"
+          onClick={() => setCollapsed(!collapsed)}
+        >
+          <span className="navbar-toggler-icon"></span>
+        </button>
+
+        <div className={collapsibleClassNames}>
+          <ul className="navbar-nav me-auto mb-2 mb-sm-0">
+            <li className="nav-item">
+              <Link href="/products">
+                <a className="nav-link active" href="/">
+                  Products
+                </a>
+              </Link>
+            </li>
+          </ul>
+
+          <FakeSearch onClick={onSearchClick} />
+        </div>
+      </div>
+    </nav>
+  );
+}
+
+export function FakeSearch({ onClick = () => {} }) {
+  return (
+    <div className="d-flex" onClick={onClick}>
+      <input
+        type="search"
+        className="form-control me-2"
+        placeholder="Click here to search"
+      />
+      <button className="btn btn-outline-success">
+        <BsSearch />
+      </button>
+    </div>
+  );
+}
diff --git a/src/main.tsx b/src/main.tsx
index 3dd2ba7..776168f 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,9 +1,12 @@
+import "./index.css";
+import "bootstrap/dist/css/bootstrap.min.css";
+
 import React from "react";
+import { App } from "./App";
 import ReactDOM from "react-dom/client";
-import "./index.css";
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
-    <h1>HI</h1>
+    <App />
   </React.StrictMode>
 );