adding pilot

app/package.json

@@ -16,7 +16,7 @@
     "@fortawesome/free-regular-svg-icons": "^6.5.2",
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
     "@fortawesome/react-fontawesome": "^0.2.2",
-    "@noahspan/noahspan-components": "^0.6.3",
+    "@noahspan/noahspan-components": "^0.6.5",
     "axios": "^1.7.2",
     "framer-motion": "^11.1.7",
     "react": "^18.2.0",

app/src/components/pilots/Pilots.tsx

@@ -2,13 +2,19 @@ import { useState } from 'react';
 import PilotForm from '../pilotForm/PilotForm';
 import {
   Button,
-  Card,
-  PlusIcon,
-  Typography,
+  EllipsisVerticalIcon,
+  EyeIcon,
+  IconButton,
   Menu,
-  MenuItem,
   MenuHandler,
-  MenuList
+  MenuItem,
+  MenuList,
+  PenIcon,
+  PlusIcon,
+  Table,
+  TableColumnDef,
+  TrashIcon,
+  Typography
 } from '@noahspan/noahspan-components';
 
 const Pilots: React.FC<unknown> = () => {
@@ -17,8 +23,127 @@ const Pilots: React.FC<unknown> = () => {
     setIsDrawerOpen(!isDrawerOpen);
   };
 
+  type Person = {
+    firstName: string;
+    lastName: string;
+    age: number;
+    visits: number;
+    status: string;
+    progress: number;
+  };
+
+  const data: Person[] = [
+    {
+      firstName: 'tanner',
+      lastName: 'linsley',
+      age: 24,
+      visits: 100,
+      status: 'In Relationship',
+      progress: 50
+    },
+    {
+      firstName: 'tandy',
+      lastName: 'miller',
+      age: 40,
+      visits: 40,
+      status: 'Single',
+      progress: 80
+    },
+    {
+      firstName: 'joe',
+      lastName: 'dirte',
+      age: 45,
+      visits: 20,
+      status: 'Complicated',
+      progress: 10
+    }
+  ];
+
+  const columns: TableColumnDef[] = [
+    {
+      accessorKey: 'firstName',
+      header: 'First Name',
+      cell: ({ getValue }) => (
+        <div>
+          {getValue<string>().charAt(0).toUpperCase() +
+            getValue<string>().slice(1)}
+        </div>
+      )
+    },
+    {
+      accessorKey: 'lastName',
+      header: 'Last Name',
+      cell: ({ getValue }) => (
+        <div>
+          {getValue<string>().charAt(0).toUpperCase() +
+            getValue<string>().slice(1)}
+        </div>
+      )
+    },
+    {
+      accessorKey: 'age',
+      header: 'Age',
+      cellProps: {
+        className: 'text-right'
+      }
+    },
+    {
+      accessorKey: 'visits',
+      header: 'Visits',
+      cellProps: {
+        className: 'text-right'
+      }
+    },
+    {
+      accessorKey: 'status',
+      header: 'Status'
+    },
+    {
+      accessorKey: 'progress',
+      header: 'Progress',
+      cellProps: {
+        className: 'text-right'
+      }
+    },
+    {
+      id: 'actions',
+      header: 'Actions',
+      cellProps: {
+        className: 'text-center'
+      },
+      cell: () => {
+        return (
+          <Menu placement="bottom-end">
+            <MenuHandler>
+              <div>
+                <IconButton variant="text">
+                  <EllipsisVerticalIcon size="xl" />
+                </IconButton>
+              </div>
+            </MenuHandler>
+            <MenuList>
+              <MenuItem className="flex gap-3">
+                <PenIcon size="lg" />
+                Edit
+              </MenuItem>
+              <MenuItem className="flex gap-3">
+                <EyeIcon size="lg" />
+                View
+              </MenuItem>
+              <hr className="my-3" />
+              <MenuItem className="flex gap-3">
+                <TrashIcon size="lg" />
+                Delete
+              </MenuItem>
+            </MenuList>
+          </Menu>
+        );
+      },
+      enableSorting: false
+    }
+  ];
+
   return (
-    // <Card className="mt-6 p-6">
     <div className="grid grid-cols-1 gap-4">
       <div className="col-span-1">
         <Typography variant="h2">Pilots</Typography>
@@ -33,16 +158,7 @@ const Pilots: React.FC<unknown> = () => {
           <PlusIcon size="lg" />
           Add Pilot
         </Button>
-        <Menu placement="bottom-end">
-          <MenuHandler>
-            <div>
-              <Button>Menu</Button>
-            </div>
-          </MenuHandler>
-          <MenuList>
-            <MenuItem>List Item 1</MenuItem>
-          </MenuList>
-        </Menu>
+        <Table defaultData={data} columns={columns}></Table>
       </div>
 
       <PilotForm
@@ -50,7 +166,6 @@ const Pilots: React.FC<unknown> = () => {
         onOpenCloseDrawer={onOpenCloseDrawer}
       />
     </div>
-    //</Card>
   );
 };