initial

src/components/schedule/Schedule.jsx

@@ -0,0 +1,92 @@
+import React from 'react';
+
+import ScheduleRow from './ScheduleRow';
+import ScheduleCell from './ScheduleCell';
+
+const widths = [85, 85, 85, 85, 400, 150];
+
+const Schedule = ({ data }) => {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        margin: '1rem 0',
+      }}
+    >
+      <div
+        style={{
+          minHeight: '662px',
+          maxHeight: '662px',
+          minWidth: '1015px',
+          backgroundColor: '#23252A',
+          borderRadius: '8px',
+          overflow: 'scroll',
+        }}
+      >
+        <ScheduleRow bg="0" border="true">
+          <ScheduleCell width={widths[0]} color="white">
+            Pilot
+          </ScheduleCell>
+          <ScheduleCell width={widths[1]} color="white">
+            Date
+          </ScheduleCell>
+          <ScheduleCell width={widths[2]} color="white">
+            Depart
+          </ScheduleCell>
+          <ScheduleCell width={widths[3]} color="white">
+            Arrive
+          </ScheduleCell>
+          <ScheduleCell width={widths[4]} color="white">
+            Destination
+          </ScheduleCell>
+          <ScheduleCell width="15" color="white"></ScheduleCell>
+          <ScheduleCell width={widths[5]} color="white">
+            Gate
+          </ScheduleCell>
+          <ScheduleCell end="true" color="white">
+            Status
+          </ScheduleCell>
+        </ScheduleRow>
+
+        {data?.length > 0 &&
+          data.map((row, i) => {
+            return (
+              <ScheduleRow bg={i % 2 === 1} key={row.id}>
+                <ScheduleCell width={widths[0]}>{row.name}</ScheduleCell>
+                <ScheduleCell width={widths[1]}>{row.date}</ScheduleCell>
+                <ScheduleCell width={widths[2]}>{row.start}</ScheduleCell>
+                <ScheduleCell width={widths[3]}>{row.end}</ScheduleCell>
+                <ScheduleCell width={widths[4]}>
+                  {row.description?.length
+                    ? row.description
+                    : row.backseat
+                      ? 'backseat'
+                      : undefined}
+                </ScheduleCell>
+                <ScheduleCell width="15" color="white"></ScheduleCell>
+                <ScheduleCell width={widths[5]}>{row.location}</ScheduleCell>
+                <ScheduleCell
+                  end="true"
+                  color={
+                    row.status.toUpperCase() === 'COMPLETED'
+                      ? '#6FB165'
+                      : row.status.toUpperCase() === 'IN PROGRESS'
+                        ? '#3197E5'
+                        : row.status.toUpperCase() === 'CANCELLED'
+                          ? '#E54331'
+                          : undefined
+                  }
+                >
+                  {row.status}
+                </ScheduleCell>
+              </ScheduleRow>
+            );
+          })}
+      </div>
+    </div>
+  );
+};
+
+export default Schedule;