Modularize frontend

frontend/src/App.tsx

@@ -1,14 +1,10 @@
-import GetMemberContainer from "./get-member/components/index/container.tsx";
-import {getMemberApiCall} from "./get-member/components/index/api.ts";
+import { getMemberApiCall } from "./tool-pages/user-search/index/api.ts";
+import GetMemberContainer from "./tool-pages/user-search/index/container.tsx";
 
 function App() {
   return (
-    <div className="Input text-center">
-      <h1 className="display-1">
-        read<span className="text-blue">メイ</span>
-      </h1>
-        <GetMemberContainer getMember={getMemberApiCall}/>
-    </div>
+    // Configure home page here by setting it so some tool page component
+    <GetMemberContainer getMember={getMemberApiCall}/>
   );
 }
 

frontend/src/main.tsx

@@ -4,13 +4,26 @@ import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import App from "./App.tsx";
 import "./scss/style.scss";
 import ErrorPage from "./error-page.tsx";
+import GetMemberContainer from "./tool-pages/user-search/index/container.tsx";
+import { getMemberApiCall } from "./tool-pages/user-search/index/api.ts";
+import TemplatedTool from "./tool-pages/tool-template/index.tsx";
 
 const router = createBrowserRouter([
   {
     path: "/",
     element: <App />,
     errorElement: <ErrorPage />,
   },
+  {
+    path: "/member-search",
+    element: <GetMemberContainer getMember={getMemberApiCall}/>,
+    errorElement: <ErrorPage />,
+  },
+  {
+    path: "/tool-template",
+    element: <TemplatedTool></TemplatedTool>,
+    errorElement: <ErrorPage />,
+  },
 ]);
 
 ReactDOM.createRoot(document.getElementById("root")!).render(

frontend/src/scss/style.scss

@@ -70,4 +70,4 @@ body {
 
 .background-blue {
   background: #32A2D2;
-}
+}

frontend/src/tool-pages/tool-page-components/navBar.tsx

@@ -0,0 +1,26 @@
+import { Navbar, Nav} from 'react-bootstrap';
+import {ReactElement} from "react";
+
+const ReadMeiNavBar = (): ReactElement => {
+    return <>
+      <Navbar  expand={false} className="bg-body-tertiary" fixed="top">
+    <div className="w-100 justify-content-between">
+      <div className="p-2"> 
+        <Navbar.Toggle aria-controls="basic-navbar-nav"/>
+        <Navbar.Brand> ReadMei</Navbar.Brand>
+      </div>
+      <Navbar.Collapse id="basic-navbar-nav">
+        <Nav className="ml-auto p-2">
+          <Nav.Link href="/">Home</Nav.Link>
+          <Nav.Link href="/member-search">User Search</Nav.Link>
+          <Nav.Link href="/tool-template">Tool Template</Nav.Link>
+
+          {/* Add links to more tools as navlinks here*/}
+        </Nav>
+      </Navbar.Collapse>
+    </div>
+  </Navbar>
+    </>
+}
+
+export default ReadMeiNavBar;

frontend/src/tool-pages/tool-template/index.tsx

@@ -0,0 +1,14 @@
+import { ReactElement } from "react";
+import ReadMeiNavBar from "../tool-page-components/navBar";
+
+
+
+function TemplatedTool(): ReactElement {
+    return (
+        <>
+            <ReadMeiNavBar></ReadMeiNavBar>
+        </>
+    );
+
+} 
+export default TemplatedTool;

frontend/src/get-member/components/index/container.tsx → frontend/src/tool-pages/user-search/index/container.tsx

@@ -3,6 +3,7 @@ import { InputEvent } from "../../../common/interfaces.ts";
 import GetMember from "./get-member.tsx";
 import { GetMemberResponse, GetMemberError } from "./interfaces.ts";
 import { convertInput } from "../../../common/utils/convertInput.ts";
+import ReadMeiNavBar from "../../tool-page-components/navBar.tsx";
 
 interface GetMemberContainerProps {
     getMember: (membershipNum: string) => Promise<GetMemberResponse>
@@ -41,13 +42,16 @@ const GetMemberContainer = (props:GetMemberContainerProps): ReactElement => {
         setMembershipNum("")
     }
     return (
-        <GetMember onSubmit={handleSubmit}
-                    inputText={membershipNum}
-                    onChange={handleChange}
-                    response={response}
-                    error={error}
-                    membershipNum={error?.membership_num}
-        />
+        <>
+            <ReadMeiNavBar></ReadMeiNavBar>
+            <GetMember onSubmit={handleSubmit}
+                inputText={membershipNum}
+                onChange={handleChange}
+                response={response}
+                error={error}
+                membershipNum={error?.membership_num}
+            />
+        </>
     )
 }
 

frontend/src/get-member/components/index/get-member.tsx → frontend/src/tool-pages/user-search/index/get-member.tsx

@@ -1,5 +1,5 @@
 import {FormEventHandler, ReactElement} from "react";
-import Input from "../../../common/components/input";
+import Input from "../../../common/components/input/index.ts";
 import Display from "../display/display.tsx";
 import {GetMemberResponse, GetMemberError} from "./interfaces.ts";
 import {InputEvent} from "../../../common/interfaces.ts";
@@ -15,6 +15,10 @@ interface GetMemberProps {
 const GetMember = (props: GetMemberProps): ReactElement => {
 
     return (
+        <div className="Input text-center">
+        <h1 className="display-1">
+          read<span className="text-blue">メイ</span>
+        </h1>
         <div>
             <div className="row g-3">
                 <div className="col-sm"></div>
@@ -35,6 +39,7 @@ const GetMember = (props: GetMemberProps): ReactElement => {
                      response={props.response}
                      error={props.error}/>
         </div>
+      </div>
     )
 }