feat(ui): add history explore (#2022)

* break out HistoryRow, add drawer

* syntax highlighting!

* smaller text

* allow inspecting all old commands, no drag command

* fix query bug

* add loader

1 files changed, 35 insertions, 0 deletions

diff --git a/ui/src/components/CodeBlock.tsx b/ui/src/components/CodeBlock.tsx
new file mode 100644
index 00000000..a4c34784
--- /dev/null
+++ b/ui/src/components/CodeBlock.tsx
@@ -0,0 +1,35 @@
+import { Highlight, themes } from "prism-react-renderer";
+import Prism from "prismjs";
+import "prismjs/components/prism-bash";
+
+export default function CodeBlock({ code, language }: any) {
+  return (
+    <div className="overflow-auto">
+      <Highlight
+        theme={themes.github}
+        code={code}
+        prism={Prism}
+        language={language}
+      >
+        {({ className, style, tokens, getLineProps, getTokenProps }) => (
+          <pre style={style} className="p-4 break-words whitespace-pre-wrap">
+            {tokens.map((line, i) => (
+              <div key={i} {...getLineProps({ line })} data-vaul-no-drag>
+                {i == 0 && (
+                  <span className="text-gray-500 select-none">$ </span>
+                )}
+                {line.map((token, key) => (
+                  <span
+                    key={key}
+                    {...getTokenProps({ token })}
+                    data-vaul-no-drag
+                  />
+                ))}
+              </div>
+            ))}
+          </pre>
+        )}
+      </Highlight>
+    </div>
+  );
+}