From f8c475b699bef71f09ce42d7c23c1c93bb273aba Mon Sep 17 00:00:00 2001
From: Ole Morud <olekr99@hotmail.com>
Date: Sun, 21 Aug 2022 21:41:57 +0200
Subject: [PATCH] add instruction selection panel (WIP)

---
 src/InstructionMenu.tsx | 47 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 47 insertions(+)
 create mode 100644 src/InstructionMenu.tsx

diff --git a/src/InstructionMenu.tsx b/src/InstructionMenu.tsx
new file mode 100644
index 0000000..875c10c
--- /dev/null
+++ b/src/InstructionMenu.tsx
@@ -0,0 +1,47 @@
+import { Card, styled, Typography } from "@mui/material"
+import React from "react"
+import instructions from "./Instructions"
+import Tooltip, { TooltipProps, tooltipClasses } from "@mui/material/Tooltip"
+
+const HtmlTooltip = styled(({ className, ...props }: TooltipProps) => (
+  <Tooltip {...props} classes={{ popper: className }} />
+))(({ theme }) => ({
+  [`& .${tooltipClasses.tooltip}`]: {
+    backgroundColor: "#f5f5f9",
+    color: "rgba(0, 0, 0, 0.87)",
+    maxWidth: 220,
+    fontSize: theme.typography.pxToRem(12),
+    border: "1px solid #dadde9"
+  }
+}))
+
+export default function InstructionMenu() {
+  let key = 0
+
+  return (
+    <>
+      <div style={{ display: "flex" }}>
+        {instructions.map((instruction) => {
+          return (
+            <div key={key++}>
+              <HtmlTooltip
+                key={key++}
+                title={
+                  <>
+                    <Typography>{instruction.name.toUpperCase()}</Typography>
+                    <Typography>{instruction.description}</Typography>
+                  </>
+                }>
+                <Card>
+                  <Typography display="inline" noWrap>
+                    {instruction.symbol}
+                  </Typography>
+                </Card>
+              </HtmlTooltip>
+            </div>
+          )
+        })}
+      </div>
+    </>
+  )
+}