Feature/3 pilots page and drawer (#17)

* adding pilots page and drawer component

* adding pilot page and pilot drawer

app/package.json

@@ -11,7 +11,12 @@
   },
   "dependencies": {
     "@azure/msal-react": "^2.0.15",
+    "@fortawesome/fontawesome-svg-core": "^6.5.2",
+    "@fortawesome/free-regular-svg-icons": "^6.5.2",
+    "@fortawesome/free-solid-svg-icons": "^6.5.2",
+    "@fortawesome/react-fontawesome": "^0.2.2",
     "@nextui-org/react": "^2.3.6",
+    "@noahspan/noahspan-components": "^0.2.4",
     "axios": "^1.7.2",
     "framer-motion": "^11.1.7",
     "react": "^18.2.0",

app/src/components/pilots/Pilots.tsx

@@ -1,12 +1,65 @@
+import { useState } from 'react';
 import SiteNav from '../siteNav/SiteNav';
 import PilotForm from '../pilotForm/PilotForm';
+import { Button } from '@nextui-org/react';
+import {
+  Drawer,
+  DrawerBody,
+  DrawerContent,
+  DrawerFooter,
+  DrawerHeader
+} from '@noahspan/noahspan-components';
+import { faPlus } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 const Pilots: React.FC<unknown> = () => {
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+  const onOpenCloseDrawer = () => {
+    setIsDrawerOpen(!isDrawerOpen);
+  };
+
   return (
-    <div>
+    <div className="container mx-auto">
       <SiteNav />
-      <div>
-        <PilotForm />
+      <div className="px-6">
+        <h1 role="heading">Pilots</h1>
+        <Button
+          color="default"
+          variant="light"
+          onClick={onOpenCloseDrawer}
+          startContent={<FontAwesomeIcon icon={faPlus} />}
+          data-testid="new-pilot-button"
+        >
+          New
+        </Button>
+        <Drawer isOpen={isDrawerOpen} data-testid="pilot-drawer">
+          <DrawerContent>
+            <DrawerHeader>
+              <h2>Add Pilot</h2>
+            </DrawerHeader>
+            <DrawerBody>
+              <PilotForm />
+            </DrawerBody>
+            <DrawerFooter>
+              <div className="flex gap-4 justify-end justify-self-center">
+                <div>
+                  <Button
+                    color="default"
+                    onClick={onOpenCloseDrawer}
+                    data-testid="pilot-drawer-cancel-button"
+                  >
+                    Cancel
+                  </Button>
+                </div>
+                <div>
+                  <Button color="primary" onClick={onOpenCloseDrawer}>
+                    Save
+                  </Button>
+                </div>
+              </div>
+            </DrawerFooter>
+          </DrawerContent>
+        </Drawer>
       </div>
     </div>
   );

app/src/components/siteNav/SiteNav.tsx

@@ -10,6 +10,7 @@ import {
 import { Link as ReactRouterLink } from 'react-router-dom';
 import { useIsAuthenticated, useMsal } from '@azure/msal-react';
 import { useAppContext } from '../../hooks/appContext/UseAppContext';
+import { Logo, Plane } from '@noahspan/noahspan-components';
 
 const SiteNav: React.FC<unknown> = () => {
   const isAuthenticated = useIsAuthenticated();
@@ -22,8 +23,18 @@ const SiteNav: React.FC<unknown> = () => {
   console.log(accounts);
 
   return (
-    <Navbar isBordered>
-      <NavbarBrand>Site Logo Goes Here</NavbarBrand>
+    <Navbar
+      classNames={{
+        base: 'bg-transparent z-0'
+      }}
+      isBlurred={false}
+      maxWidth="full"
+      data-testid="flying-navbar"
+    >
+      <NavbarBrand>
+        <Logo className="pr-3" height={50} width={50} data-testid="logo" />
+        <Plane size="2xl" />
+      </NavbarBrand>
       <NavbarContent justify="center">
         <NavbarItem>
           {appContext.state.featureFlags.find(
@@ -37,7 +48,13 @@ const SiteNav: React.FC<unknown> = () => {
       </NavbarContent>
       <NavbarContent justify="end">
         {!isAuthenticated && (
-          <Button as={Link} color="primary" href="#" onClick={initializeLogin}>
+          <Button
+            as={Link}
+            color="primary"
+            href="#"
+            onClick={initializeLogin}
+            data-testid="login-link"
+          >
             Login
           </Button>
         )}

app/src/index.css

@@ -1,3 +1,12 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer base {
+  h1 {
+    @apply text-2xl font-bold leading-7 text-gray-900;
+  }
+  h2 {
+    @apply text-2xl font-bold leading-7 text-gray-900;
+  }
+}

app/src/main.tsx

@@ -7,6 +7,7 @@ import App from './App.tsx';
 import { BrowserRouter } from 'react-router-dom';
 import AppContextProvider from './context/appContext/AppContextProvider.tsx';
 import './index.css';
+import '@noahspan/noahspan-components/noahspan-components.css';
 
 const configuration: Configuration = {
   auth: {