Initial Commit

src/components/StatusCode/index.tsx

@@ -0,0 +1,34 @@
+import { FC } from 'react';
+
+import styles from './styles.module.scss';
+
+const StatusCode: FC<{ code: string }> = ({ code }) => (
+  <span className={[styles.statusCodes_code, codeTypeStyle(code)].join(' ')}>
+    {code}
+  </span>
+);
+
+const codeTypeStyle = (code: string) => {
+  const range = parseInt(code[0]);
+
+  if (isNaN(range)) {
+    return styles.statusCodes_codeInformative;
+  }
+
+  switch (range) {
+    // 2xx
+    case 2:
+      return styles.statusCodes_codeSuccess;
+    // 3xx
+    case 3:
+      return styles.statusCodes_codeRedirect;
+    // 4xx, 5xx
+    case 4:
+    case 5:
+      return styles.statusCodes_codeError;
+    default:
+      return styles.statusCodes_codeInformative;
+  }
+};
+
+export default StatusCode;

src/components/StatusCode/styles.module.scss

@@ -0,0 +1,35 @@
+@import '../../styles/utils/mixins';
+
+.statusCodes {
+  @include generatePxToRem('font-size', 14);
+
+  &_code {
+    font-family: var(--font-family-mono);
+    font-weight: normal;
+
+    &::before {
+      content: '';
+      display: inline-block;
+      width: 10px;
+      height: 10px;
+      border-radius: 5px;
+      @include generatePxToRem('margin-right', 6);
+    }
+  }
+
+  &_codeInformative::before {
+    background-color: var(--status-color-informative);
+  }
+
+  &_codeSuccess::before {
+    background-color: var(--status-color-success);
+  }
+
+  &_codeRedirect::before {
+    background-color: var(--status-color-redirect);
+  }
+
+  &_codeError::before {
+    background-color: var(--status-color-error);
+  }
+}