adding pilots page and drawer component

2024-05-28 20:45:10 -05:00
parent 6782c1906d
commit 13b408287f
8 changed files with 180 additions and 11 deletions
--- a/app/package.json
+++ b/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.0",
    "axios": "^1.7.2",
    "framer-motion": "^11.1.7",
    "react": "^18.2.0",
--- a/app/public/noahspan-logo.png
+++ b/app/public/noahspan-logo.png
--- a/app/src/components/pilots/Pilots.tsx
+++ b/app/src/components/pilots/Pilots.tsx
@@ -1,12 +1,52 @@
+import { useState } from 'react';
 import SiteNav from '../siteNav/SiteNav';
 import PilotForm from '../pilotForm/PilotForm';
+import { Button } from '@nextui-org/react';
+import { Drawer } 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>Pilots</h1>
+        <Button
+          color="default"
+          variant="light"
+          onClick={onOpenCloseDrawer}
+          startContent={<FontAwesomeIcon icon={faPlus} />}
+        >
+          New
+        </Button>
+        <Drawer
+          isOpen={isDrawerOpen}
+          onClose={onOpenCloseDrawer}
+          headerText="Add Pilot"
+          size="4xl"
+          footer={
+            <div className="flex gap-4 justify-end justify-self-center">
+              <div>
+                <Button color="default" onClick={onOpenCloseDrawer}>
+                  Cancel
+                </Button>
+              </div>
+              <div>
+                <Button color="primary" onClick={onOpenCloseDrawer}>
+                  Save
+                </Button>
+              </div>
+            </div>
+          }
+        >
+          <PilotForm />
+        </Drawer>
      </div>
    </div>
  );
--- a/app/src/components/siteNav/SiteNav.tsx
+++ b/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,17 @@ 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"
+    >
+      <NavbarBrand>
+        <Logo className="pr-3" height={50} width={50} />
+        <Plane size="2xl" />
+      </NavbarBrand>
      <NavbarContent justify="center">
        <NavbarItem>
          {appContext.state.featureFlags.find(
--- a/app/src/index.css
+++ b/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;
+  }
+}
--- a/app/src/main.tsx
+++ b/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: {
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,9 +12,6 @@
        "app",
        "tests"
      ],
-      "dependencies": {
-        "@azure/app-configuration": "^1.6.0"
-      },
      "devDependencies": {
        "@typescript-eslint/eslint-plugin": "^7.2.0",
        "@typescript-eslint/parser": "^7.2.0",
@@ -66,7 +63,12 @@
      "version": "0.1.0",
      "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.0",
        "axios": "^1.7.2",
        "framer-motion": "^11.1.7",
        "react": "^18.2.0",
@@ -2070,6 +2072,75 @@
        "tslib": "^2.4.0"
      }
    },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "6.5.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.5.2.tgz",
+      "integrity": "sha512-gBxPg3aVO6J0kpfHNILc+NMhXnqHumFxOmjYCFfOiLZfwhnnfhtsdA2hfJlDnj+8PjAs6kKQPenOTKj3Rf7zHw==",
+      "hasInstallScript": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "6.5.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.5.2.tgz",
+      "integrity": "sha512-5CdaCBGl8Rh9ohNdxeeTMxIj8oc3KNBgIeLMvJosBMdslK/UnEB8rzyDRrbKdL1kDweqBPo4GT9wvnakHWucZw==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.5.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-brands-svg-icons": {
+      "version": "6.5.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.5.2.tgz",
+      "integrity": "sha512-zi5FNYdmKLnEc0jc0uuHH17kz/hfYTg4Uei0wMGzcoCL/4d3WM3u1VMc0iGGa31HuhV5i7ZK8ZlTCQrHqRHSGQ==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.5.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-regular-svg-icons": {
+      "version": "6.5.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.5.2.tgz",
+      "integrity": "sha512-iabw/f5f8Uy2nTRtJ13XZTS1O5+t+anvlamJ3zJGLEVE2pKsAWhPv2lq01uQlfgCX7VaveT3EVs515cCN9jRbw==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.5.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "6.5.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.5.2.tgz",
+      "integrity": "sha512-QWFZYXFE7O1Gr1dTIp+D6UcFUF0qElOnZptpi7PBUMylJh+vFmIedVe1Ir6RM1t2tEQLLSV1k7bR4o92M+uqlw==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.5.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/react-fontawesome": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.2.tgz",
+      "integrity": "sha512-EnkrprPNqI6SXJl//m29hpaNzOp1bruISWaOiRtkMi/xSvHJlzc2j2JAYS7egxt/EbjSNV/k6Xy0AQI6vB2+1g==",
+      "dependencies": {
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+        "react": ">=16.3"
+      }
+    },
    "node_modules/@humanwhocodes/config-array": {
      "version": "0.11.14",
      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
@@ -4402,6 +4473,27 @@
      "resolved": "app",
      "link": true
    },
+    "node_modules/@noahspan/noahspan-components": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@noahspan/noahspan-components/-/noahspan-components-0.2.0.tgz",
+      "integrity": "sha512-uRmR5RnXNgjAnPpmLEx81XG6xVvU4jndbXcgQgaGqpGO+9hx5YRcrKL0KP0bTFVzSafK7CTR7+1ag9fNHwBzJg==",
+      "dependencies": {
+        "@fortawesome/fontawesome-svg-core": "^6.5.2",
+        "@fortawesome/free-brands-svg-icons": "^6.5.2",
+        "@fortawesome/free-regular-svg-icons": "^6.5.2",
+        "@fortawesome/free-solid-svg-icons": "^6.5.2",
+        "@fortawesome/react-fontawesome": "^0.2.0",
+        "@nextui-org/react": "^2.3.6",
+        "framer-motion": "^11.1.9"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0"
+      }
+    },
    "node_modules/@noahspan/noahspan-modules": {
      "version": "0.1.2",
      "resolved": "https://registry.npmjs.org/@noahspan/noahspan-modules/-/noahspan-modules-0.1.2.tgz",
@@ -12328,6 +12420,21 @@
        "node": ">= 6"
      }
    },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
+    "node_modules/prop-types/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
    "node_modules/property-expr": {
      "version": "2.0.6",
      "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.6.tgz",
--- a/package.json
+++ b/package.json
@@ -24,8 +24,5 @@
  },
  "lint-staged": {
    "**/*": "prettier --write \"**/src/**/*.ts\" \"**/test/**/*.ts\" --ignore-unknown"
-  },
-  "dependencies": {
-    "@azure/app-configuration": "^1.6.0"
  }
 }