Prepare for githubv1.0.0

2 files changed, 57 insertions, 0 deletions

diff --git a/src/components/RequestSummary/RequestSummary.module.scss b/src/components/RequestSummary/RequestSummary.module.scss
new file mode 100644
index 0000000..e1752b3
--- /dev/null
+++ b/src/components/RequestSummary/RequestSummary.module.scss
@@ -0,0 +1,24 @@
+.requestSummary {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  padding: 1em;
+  grid-gap: 1em;
+  align-items: center;
+}
+
+.method {
+}
+
+.statusCode {
+  padding: 0.2em;
+  border-radius: 0.4em;
+  background-color: darkgray;
+
+  &.info, &.success, &.redirect {
+    background-color: forestgreen;
+  }
+
+  &.clientError, &.serverError {
+    background-color: red;
+  }
+}
diff --git a/src/components/RequestSummary/RequestSummary.tsx b/src/components/RequestSummary/RequestSummary.tsx
new file mode 100644
index 0000000..af928c0
--- /dev/null
+++ b/src/components/RequestSummary/RequestSummary.tsx
@@ -0,0 +1,33 @@
+import {RequestResponse} from "~hooks/useRequests";
+import * as React from "react";
+import classNames from "classnames";
+
+import styles from './RequestSummary.module.scss';
+
+interface RequestSummaryProps {
+  requestResponse: RequestResponse
+  className?: string
+}
+
+function isBetween(value: number, min: number, max: number) {
+  return value >= min && value <= max
+}
+
+export default function RequestSummary({ requestResponse: { request, response }, className = ''}: RequestSummaryProps) {
+  const statusCode = response?.status ?? 0
+  return (
+    <div className={classNames(styles.requestSummary, className)}>
+      <span className={styles.method}>{ request.method }</span>
+      <p>{ request.path }</p>
+      <span className={classNames(styles.statusCode, {
+        [styles.info]: isBetween(statusCode, 100, 199),
+        [styles.success]: isBetween(statusCode, 200, 299),
+        [styles.redirect]: isBetween(statusCode, 300, 399),
+        [styles.clientError]: isBetween(statusCode, 400, 499),
+        [styles.serverError]: isBetween(statusCode, 500, 599)
+      })}>
+        { response?.status ?? 'Loading...'}
+      </span>
+    </div>
+  )
+}