Add Shakespeare esolang

languages/shakespeare/renderer/topbar.tsx

@@ -0,0 +1,56 @@
+import { Tag, Text } from "@blueprintjs/core";
+import { SimpleTag } from "./utils";
+
+const styles = {
+  charChip: {
+    margin: "0 5px",
+  },
+  questionText: {
+    marginLeft: 30,
+    marginRight: 10,
+  },
+};
+
+type Props = {
+  charactersOnStage: string[];
+  currSpeaker: string | null;
+  questionState: boolean | null;
+};
+
+export const TopBar = (props: Props) => {
+  const { charactersOnStage, currSpeaker, questionState } = props;
+
+  const characterChips =
+    charactersOnStage.length === 0 ? (
+      <Tag large minimal>
+        The stage is empty
+      </Tag>
+    ) : (
+      charactersOnStage.map((character) => {
+        return (
+          <SimpleTag
+            key={character}
+            intent={character === currSpeaker ? "active" : undefined}
+          >
+            {character}
+          </SimpleTag>
+        );
+      })
+    );
+
+  return (
+    <div>
+      {characterChips}
+      {questionState != null && (
+        <>
+          <Text tagName="span" style={styles.questionText}>
+            Answer to question:
+          </Text>
+          <SimpleTag intent={questionState ? "success" : "danger"}>
+            {questionState ? "yes" : "no"}
+          </SimpleTag>
+        </>
+      )}
+    </div>
+  );
+};