Added Past incident component, stories & example incidents json data …

…file.

public/incidents.json

@@ -0,0 +1,21 @@
+{
+  "last_updated": "2024-07-02T15:53:42+1000",
+  "incidents": [
+    {
+      "datetime_reported": "2024-04-16T10:53:42+1000",
+      "reason": "PB Server - service disrupted"
+    },
+    {
+      "datetime_reported": "2024-02-12T09:43:42+1000",
+      "reason": "HPC-FS Scheduled maintenance"
+    },
+    {
+      "datetime_reported": "2023-12-13T06:33:42+1000",
+      "reason": "PB Server - service disrupted"
+    },
+    {
+      "datetime_reported": "2023-10-19T07:33:32+1000",
+      "reason": "HPC-FS Scheduled maintenance"
+    }
+  ]
+}

src/components/pastIncidents/PastIncidents.stories.tsx

@@ -0,0 +1,22 @@
+import { Meta, StoryFn } from "@storybook/react";
+import { PastIncidents, PastIncidentsData } from "./PastIncidents";
+import jsonData from "../../../public/incidents.json";
+
+const typedJsonData: PastIncidentsData["data"] =
+  jsonData as PastIncidentsData["data"];
+
+export default {
+  title: "Component/PastIncidents",
+  component: PastIncidents,
+} as Meta<typeof PastIncidents>;
+
+const Template: StoryFn<typeof PastIncidents> = (args) => (
+  <PastIncidents {...args} />
+);
+
+export const Simple = Template.bind({});
+Simple.args = {
+  title: "Past Incidents",
+  subTitle: "Showing all past incidents in the last 6 months",
+  data: typedJsonData,
+};

src/components/pastIncidents/PastIncidents.tsx

@@ -0,0 +1,68 @@
+import React, { FunctionComponent } from "react";
+import {
+  Text,
+  Flex,
+  Box,
+  Table,
+  Tbody,
+  Tr,
+  Td,
+  TableContainer,
+} from "@chakra-ui/react";
+
+interface Incident {
+  datetime_reported: string;
+  reason: string;
+}
+
+interface Data extends Incident {
+  last_updated?: string;
+  incidents: Incident[];
+}
+
+export interface PastIncidentsData extends Data {
+  title: string;
+  subTitle: string;
+  data?: Data;
+}
+
+export const PastIncidents: FunctionComponent<PastIncidentsData> = ({
+  title,
+  subTitle,
+  data,
+}) => {
+  return (
+    <Box>
+      <Flex direction="column" px={6} py={4}>
+        <Text as="b" fontSize="3xl">
+          {title}
+        </Text>
+        <Text fontSize="1xl">{subTitle}</Text>
+      </Flex>
+      <TableContainer>
+        <Table>
+          <Tbody>
+            {data && data?.incidents.length > 0 ? (
+              data.incidents.map((incident: any, index: number) => (
+                <Tr key={index}>
+                  <Td>
+                    <Text fontSize="2xl" as="b">
+                      {incident?.datetime_reported}
+                    </Text>
+                    <Text fontSize="1xl" my={2}>
+                      {incident?.reason}
+                    </Text>
+                  </Td>
+                </Tr>
+              ))
+            ) : (
+              <Tr></Tr>
+            )}
+          </Tbody>
+        </Table>
+      </TableContainer>
+    </Box>
+  );
+};
+
+export default PastIncidents;

src/components/pastIncidents/index.ts

@@ -0,0 +1 @@
+export { PastIncidents, type PastIncidentsData } from "./PastIncidents";