From 861845e6df91f1ba1207ccdc2955007b051824f8 Mon Sep 17 00:00:00 2001
From: Mitchell Hashimoto <mitchell.hashimoto@gmail.com>
Date: Thu, 5 Oct 2023 17:28:01 -0700
Subject: [PATCH] website: types

---
 website/app/vt/bs/page.mdx        |  6 +++---
 website/app/vt/cub/page.mdx       |  7 +++++++
 website/components/VTSequence.tsx | 13 ++++++++++---
 3 files changed, 20 insertions(+), 6 deletions(-)
 create mode 100644 website/app/vt/cub/page.mdx

diff --git a/website/app/vt/bs/page.mdx b/website/app/vt/bs/page.mdx
index d7f81d105..ab8285957 100644
--- a/website/app/vt/bs/page.mdx
+++ b/website/app/vt/bs/page.mdx
@@ -2,8 +2,8 @@ import VTSequence from "@/components/VTSequence";
 
 # Backspace (BS)
 
-## Sequence
-
 <VTSequence sequence="BS" />
 
-Move the cursor left one cell.
+This sequence performs [cursor backword (CUB)](/vt/cub)
+with `n = 1`. There is no additional or different behavior for
+using `BS`.
diff --git a/website/app/vt/cub/page.mdx b/website/app/vt/cub/page.mdx
new file mode 100644
index 000000000..9db2fca69
--- /dev/null
+++ b/website/app/vt/cub/page.mdx
@@ -0,0 +1,7 @@
+import VTSequence from "@/components/VTSequence";
+
+# Cursor Backword (CUB)
+
+<VTSequence sequence={["CSI", "n", "D"]} />
+
+TODO
diff --git a/website/components/VTSequence.tsx b/website/components/VTSequence.tsx
index b19c0941a..ee7f9bd7d 100644
--- a/website/components/VTSequence.tsx
+++ b/website/components/VTSequence.tsx
@@ -1,6 +1,13 @@
 // Draw a diagram showing the VT sequence.
-export default function VTSequence({ sequence }: { sequence: string }) {
-  const specialChar = special[sequence] ?? 0;
+export default function VTSequence({
+  sequence,
+}: {
+  sequence: string | [string];
+}) {
+  // TODO: handle sequence array
+  const elem = typeof sequence === "string" ? sequence : sequence[0];
+
+  const specialChar = special[elem] ?? 0;
   const hex = specialChar.toString(16).padStart(2, "0");
 
   return (
@@ -13,7 +20,7 @@ export default function VTSequence({ sequence }: { sequence: string }) {
   );
 }
 
-const special = {
+const special: { [key: string]: number } = {
   BEL: 0x07,
   BS: 0x08,
 };