feat(components): add NavBar

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",

src/App.tsx

@@ -0,0 +1,5 @@
+import { NavBar } from "./components/Nav";
+
+export function App() {
+  return <NavBar />;
+}

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>
+  );
+}

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>
 );