Added basic operational status component and story.

src/components/OperationalStatus/OperationalStatus.stories.tsx

@@ -0,0 +1,25 @@
+import { Meta, StoryFn } from "@storybook/react";
+import { OperationalStatus, OperationalStatusData } from "./OperationalStatus";
+import jsonData from "../../../public/status.json";
+
+const typedJsonData: OperationalStatusData["data"] =
+  jsonData as OperationalStatusData["data"];
+
+export default {
+  title: "Component/OperationalStatus",
+  component: OperationalStatus,
+} as Meta<typeof OperationalStatus>;
+
+const Template: StoryFn<typeof OperationalStatus> = (args) => (
+  <OperationalStatus {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  data: typedJsonData,
+};
+
+export const NoDataAvailable = Template.bind({});
+NoDataAvailable.args = {
+  data: undefined,
+};

src/components/OperationalStatus/OperationalStatus.tsx

@@ -0,0 +1,74 @@
+import React, { FunctionComponent } from "react";
+import {
+  Text,
+  Box,
+  Table,
+  Thead,
+  Tbody,
+  Tr,
+  Th,
+  Td,
+  TableContainer,
+  Tag,
+  TagLabel,
+} from "@chakra-ui/react";
+
+interface Service {
+  name: string;
+  status: string;
+  error?: string;
+}
+
+interface Data extends Service {
+  last_updated?: string;
+  services: Service[];
+}
+
+export interface OperationalStatusData extends Data {
+  data?: Data;
+}
+
+export const OperationalStatus: FunctionComponent<OperationalStatusData> = ({
+  data,
+}) => {
+  return (
+    <Box>
+      <Text as="b" fontSize="3xl">
+        Operational status
+      </Text>
+      {data && data?.services.length > 0 ? (
+        <TableContainer>
+          <Table variant="simple">
+            <Thead>
+              <Tr>
+                <Th>SERVICE</Th>
+                <Th isNumeric>STATUS</Th>
+              </Tr>
+            </Thead>
+            <Tbody>
+              {data?.services.map((service: any) => (
+                <Tr key={service?.name}>
+                  <Td>{service?.name}</Td>
+                  <Td isNumeric>
+                    <Tag
+                      variant="subtle"
+                      colorScheme={service?.status === "OK" ? "green" : "red"}
+                    >
+                      <TagLabel>
+                        {service?.status === "OK" ? "Operational" : "Disrupted"}
+                      </TagLabel>
+                    </Tag>
+                  </Td>
+                </Tr>
+              ))}
+            </Tbody>
+          </Table>
+        </TableContainer>
+      ) : (
+        <Text>No Data available.</Text>
+      )}
+    </Box>
+  );
+};
+
+export default OperationalStatus;

src/components/OperationalStatus/index.ts

@@ -0,0 +1,4 @@
+export {
+  OperationalStatus,
+  type OperationalStatusData,
+} from "./OperationalStatus";