Some more stuff

package.json

@@ -95,7 +95,7 @@
     "source-map-support": "0.5.21",
     "ts-jest": "28.0.4",
     "ts-node": "10.8.1",
-    "typescript": "4.7.3",
+    "typescript": "^4.7.3",
     "vercel": "25.1.0"
   },
   "dependenciesMeta": {

src/components/buttons/button.tsx

@@ -0,0 +1,34 @@
+import classNames from "classnames";
+import React from "react";
+
+enum ButtonStyle {
+  PRIMARY = "bg-green-500 hover:bg-green-700 text-white border-green-500 hover:border-green-700 border-2",
+  SECONDARY = "bg-transparent hover:bg-green-500 text-green-500 hover:text-white border-green-500 border-2",
+}
+
+interface ButtonProps {
+  readonly buttonStyle: ButtonStyle;
+  readonly onClick: () => void;
+  readonly children: React.ReactNode;
+}
+
+// eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types -- React.ReactNode
+const Button: React.FunctionComponent<ButtonProps> = ({
+  buttonStyle,
+  onClick: handleClick,
+  children,
+}) => (
+  <button
+    type="button"
+    onClick={handleClick}
+    className={classNames(
+      "font-normal py-2 px-4 rounded transition-all",
+      buttonStyle
+    )}
+  >
+    {children}
+  </button>
+);
+
+export default Button;
+export { ButtonStyle };

src/components/page_container.tsx

@@ -27,13 +27,13 @@ const PageContainer: React.FunctionComponent<PageContainerProps> = ({
   pageStyle = PageStyle.LIGHT,
 }) => (
   <div className={cx("flex flex-col min-h-screen items-center", pageStyle)}>
-    <div className="flex w-full flex-col items-center">
+    <div className="flex w-full grow flex-col items-center">
       <div className="my-8 flex flex-col space-y-4">
         {hasHeader ? <Header /> : null}
         {hasNavbar ? <Navbar currentPage={navbarPage} /> : null}
       </div>
 
-      <main className="flex w-full px-6 xl:px-0">{children}</main>
+      <main className="flex w-full grow px-6 xl:px-0">{children}</main>
     </div>
   </div>
 );

src/pages/hacks/ethhack.tsx

@@ -1,28 +1,76 @@
 import MonacoEditor, { useMonaco } from "@monaco-editor/react";
 import Head from "next/head";
-import React, { useEffect } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 
+import Button, { ButtonStyle } from "../../components/buttons/button";
 import PageContainer, { PageStyle } from "../../components/page_container";
 
 import type { NextPage } from "next";
 
-const Editor: React.FunctionComponent = () => {
+interface EditorProps {
+  readonly onCodeChange: (code: string) => void;
+}
+
+const Editor: React.FunctionComponent<EditorProps> = ({ onCodeChange }) => {
   const monaco = useMonaco();
 
+  const handleCodeChange = useCallback(
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars -- this is just for Monaco.
+    (code: string | undefined, _: unknown): void => {
+      if (typeof code !== "undefined") {
+        onCodeChange(code);
+      }
+    },
+    [onCodeChange]
+  );
+
   useEffect(() => {
     if (monaco !== null) {
       const model = monaco.editor.getModels()[0];
       if (typeof model === "undefined") {
         throw new Error("no monaco model found");
       }
-      monaco.editor.setModelLanguage(model, "typescript");
+      monaco.editor.setModelLanguage(model, "javascript");
       monaco.editor.setTheme("vs-dark");
     }
   }, [monaco]);
 
   return (
-    <div className="h-full py-4">
-      <MonacoEditor />
+    <div className="flex grow">
+      <MonacoEditor onChange={handleCodeChange} />
+    </div>
+  );
+};
+
+interface ExecutorProps {
+  readonly code: string;
+}
+
+const Executor: React.FunctionComponent<ExecutorProps> = ({ code }) => {
+  const handleExecute = useCallback(() => {
+    eval(code);
+  }, [code]);
+
+  return (
+    <div className="flex flex-col">
+      <div className="flex flex-row">
+        <Button buttonStyle={ButtonStyle.SECONDARY} onClick={handleExecute}>
+          Execute
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+const EditorPanel: React.FunctionComponent = () => {
+  const [code, setCode] = useState("");
+
+  const handleCodeChange = setCode;
+
+  return (
+    <div className="flex grow flex-row">
+      <Editor onCodeChange={handleCodeChange} />
+      <Executor code={code} />
     </div>
   );
 };
@@ -44,7 +92,7 @@ const EthHack: NextPage = () => (
       pageStyle={PageStyle.HACKER}
     >
       <div className="flex w-full flex-col">
-        <Editor />
+        <EditorPanel />
       </div>
     </PageContainer>
   </>

src/pages/index.tsx

@@ -28,7 +28,7 @@ const Index: NextPage<IndexProps> = ({ imageBlur }: IndexProps) => (
     </Head>
 
     <PageContainer hasHeader hasNavbar navbarPage={NavbarPage.HOME}>
-      <div className="mx-auto flex max-w-5xl flex-row justify-center gap-8 py-8">
+      <div className="mx-auto flex max-w-5xl grow-0 flex-row justify-center gap-8 py-8">
         <div className="prose flex flex-1 flex-col text-sm font-light">
           <p className="text-3xl">yo</p>
           <p>
@@ -114,7 +114,7 @@ const Index: NextPage<IndexProps> = ({ imageBlur }: IndexProps) => (
             or something instead.
           </p>
         </div>
-        <div className="hidden max-w-md overflow-hidden rounded-3xl shadow-inner xl:flex">
+        <div className="hidden h-min max-w-md overflow-hidden rounded-3xl shadow-inner xl:flex">
           <Image
             alt="Photograph of Ziyad Edher in a stuffed animal store. He is holding a stuffed hedgehog plushie."
             src={imageBlur.ziyadedher.url}

stories/components/buttons/button.stories.tsx

@@ -0,0 +1,41 @@
+import Button, { ButtonStyle } from "../../../src/components/buttons/button";
+
+import type { Meta, Story } from "@storybook/react";
+
+const META: Meta = {
+  title: "Components/Buttons/Button",
+  component: Button,
+};
+
+interface ButtonTemplateProps {
+  readonly text: string;
+  readonly buttonStyle: ButtonStyle;
+  readonly onClick: () => void;
+}
+
+const ButtonTemplate: Story<ButtonTemplateProps> = ({
+  text,
+  buttonStyle,
+  onClick: handleClick,
+}: ButtonTemplateProps) => (
+  <Button buttonStyle={buttonStyle} onClick={handleClick}>
+    {text}
+  </Button>
+);
+
+const ButtonStory = ButtonTemplate.bind({});
+ButtonStory.storyName = "Button";
+ButtonStory.args = {
+  text: "Submit!",
+  buttonStyle: ButtonStyle.PRIMARY,
+};
+ButtonStory.argTypes = {
+  buttonStyle: {
+    options: Object.values(ButtonStyle),
+    control: { type: "select" },
+  },
+  onClick: { action: "clicked" },
+};
+
+export { ButtonStory };
+export default META;