WIP

src/ui/components/Info.tsx

@@ -0,0 +1,55 @@
+import { Component, Show } from "solid-js";
+import { Handlers } from "../../types";
+import { state } from "../../state";
+import "./Info.css";
+import isSafeLink from "../../utils/isSafeLink";
+
+const Info: Component<{ handlers: Handlers }> = () => {
+  return (
+    <div class="info">
+      <div className="info__players">
+        <p>
+          <button className="info__color info__color--white"></button>
+          {state.game.header.WhitePretty}{" "}
+          <span className="info__rating">
+            {state.game.header.WhiteElo ?? "????"}
+          </span>
+        </p>
+        <p>
+          <button className="info__color info__color--black"></button>
+          {state.game.header.BlackPretty}{" "}
+          <span className="info__rating">
+            {state.game.header.BlackElo ?? "????"}
+          </span>
+        </p>
+      </div>
+      <div className="info__event">
+        <Show when={state.game.header.Event}>
+          <p>{state.game.header.Event}</p>
+        </Show>
+        <Show when={state.game.header.Round}>
+          <p>Round {state.game.header.Round}</p>
+        </Show>
+      </div>
+      <div className="info__site">
+        <Show when={state.game.header.Site}>
+          <p>
+            <Show
+              when={isSafeLink(state.game.header.Site)}
+              fallback={state.game.header.Site}
+            >
+              <a href={state.game.header.Site ?? ""}>
+                {state.game.header.Site?.replace(/^https:\/\//, "")}
+              </a>
+            </Show>
+          </p>
+        </Show>
+        <Show when={state.game.header.DatePretty}>
+          <p>{state.game.header.DatePretty}</p>
+        </Show>
+      </div>
+    </div>
+  );
+};
+
+export default Info;