TypeScript proof of concept

website/.eslintrc

@@ -1,3 +1,3 @@
 {
-  "extends": "react-app"
+  "extends": "react-app",
 }

website/package.json

@@ -23,7 +23,7 @@
     "redux": "^4.2.1",
     "redux-logger": "^3.0.6",
     "redux-thunk": "^2.2.0",
-    "styled-components": "^5.0.1",
+    "styled-components": "^6.1.11",
     "typeface-crimson-text": "1.1.13",
     "typeface-quicksand": "1.1.13"
   },
@@ -35,8 +35,8 @@
   },
   "scripts": {
     "analyze": "source-map-explorer build/static/js/*",
-    "lint": "prettier --check 'src/**/*.{js,css}'",
-    "format": "prettier --write 'src/**/*.{js,css}'",
+    "lint": "prettier --check 'src/**/*.{js,jsx,ts,tsx,json,css}'",
+    "format": "prettier --write 'src/**/*.{js,jsx,ts,tsx,json,css}'",
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",

website/src/components/ErrorMessage.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const ErrorMessageWrapper = styled.p`
+  width: 700px;
+  margin: 40px auto;
+  font-size: 28px;
+  text-align: center;
+  line-height: 1.5;
+  color: ${(props) => props.theme.colors.red};
+  text-shadow: black 1px 1px;
+
+  @media (max-width: 1200px) {
+    width: 70%;
+    font-size: 24px;
+  }
+`;
+
+export const ErrorMessage: React.FC<{
+  readonly errorMessage: string;
+}> = ({errorMessage}) => {
+  if (!errorMessage) return null;
+
+  const tokens = errorMessage.split('"');
+
+  return (
+    <ErrorMessageWrapper>
+      {tokens.map((token, i) =>
+        // Bold page titles in the provided error message.
+        i % 2 === 0 ? <span key={i}>{token}</span> : <b key={i}>"{token}"</b>
+      )}
+    </ErrorMessageWrapper>
+  );
+};