From 34265613b80d1d2249d276da5fcd5e4c274af357 Mon Sep 17 00:00:00 2001
From: Ellie Huxtable <ellie@elliehuxtable.com>
Date: Tue, 14 May 2024 12:16:04 +0700
Subject: 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
---
 ui/src/components/CodeBlock.tsx | 35 +++++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)
 create mode 100644 ui/src/components/CodeBlock.tsx

(limited to 'ui/src/components/CodeBlock.tsx')

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>
+  );
+}
-- 
cgit v1.3.1