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>
+    );
+}