move things into components

src/components/IncidentCard.tsx

@@ -0,0 +1,30 @@
+import {Incident} from "../nws-api/types";
+import ReactTooltip from "react-tooltip";
+import React from "react";
+
+export default function IncidentCard(props: {incident: Incident}) {
+
+    const severityText: string[] = [
+        "Low Severity means that this issue does not affect any services running on NWS.",
+        "Medium Severity means that this issue may cause some slowdowns or outages on some services.",
+        "High Severity means that this issue causes an outage on the entire NWS network or most of the services running on it."
+    ];
+    let severityClass: string = props.incident.severity == 0 ? 'low' : (props.incident.severity == 1 ? 'med' : 'high');
+    let severityString: string = props.incident.severity == 0 ? 'Low' : (props.incident.severity == 1 ? 'Medium' : 'High');
+
+    return (
+        <div className={`row text-left nws-card`} style={{width: '75vw'}}>
+            <p className={"col-md-10 col-12 mb-2"}><b>{props.incident.title}</b></p>
+            <div className={`col-md-2 col-12 mb-2`}>
+                <div className={`severity-label w-max-content ${severityClass}-severity`}
+                     data-tip={severityText[props.incident.severity]}>
+                    <b>
+                        {severityString} Severity ⓘ
+                    </b>
+                    <ReactTooltip />
+                </div>
+            </div>
+            <p className={"mb-0"}>{props.incident.description}</p>
+        </div>
+    );
+}

src/components/UptimeCard.tsx

@@ -0,0 +1,29 @@
+import {UptimeRecord} from "../nws-api/types";
+import React from "react";
+import '../App.css';
+
+export default function UptimeCard(props: {uptime: UptimeRecord}) {
+    return(
+        <div className={"nws-card row mb-2"} style={{maxWidth: '100%'}}>
+            {props.uptime.url != null && <h3 className={"col-md-9 col-12"}><a href={props.uptime.url} style={{textDecoration: "none"}}>{props.uptime.name}</a></h3>}
+            {props.uptime.url == null && <h3 className={"col-md-9 col-12"}>{props.uptime.name}</h3>}
+
+            <div className={`col-md-3 col-12 d-flex d-md-none justify-content-start`}>
+                <p className={`fw-bold severity-label 
+                                    ${props.uptime.isUp ? 'low' : (props.uptime.undergoingMaintenance ? 'med' : 'high')}-severity`}
+                   style={{width: "max-content"}}>
+                    {props.uptime.isUp ? 'Up' : (props.uptime.undergoingMaintenance ? 'Maintenance' : 'Down')}
+                </p>
+            </div>
+            <div className={`d-md-flex col-md-3 col-12 d-none justify-content-end`}>
+                <p className={`fw-bold severity-label 
+                                    ${props.uptime.isUp ? 'low' : (props.uptime.undergoingMaintenance ? 'med' : 'high')}-severity`}
+                   style={{width: "max-content"}}>
+                    {props.uptime.isUp ? 'Up' : (props.uptime.undergoingMaintenance ? 'Maintenance' : 'Down')}
+                </p>
+            </div>
+            <p className={"col-md-12 col-12"}><b>Last Month Uptime:</b> {props.uptime.uptimeMonth}%</p>
+            <p className={"col-md-6 col-12"}><b>All Time Uptime:</b> {props.uptime.uptimeAllTime}%</p>
+        </div>
+    );
+}