denary to binary

app/lessons/unit-6-number-system/binary/page.tsx

@@ -1,9 +1,20 @@
 "use client";
 
+import { useState } from "react";
 import { Breadcrumbs } from "@/components/layout/breadcrumbs";
 import { BinaryConverterExplorer } from "@/components/explorers/binary-converter-explorer";
+import { DenaryToBinaryExplorer } from "@/components/explorers/denary-to-binary-explorer";
+
+type Mode = "binary-to-denary" | "denary-to-binary";
+
+const MODES: { key: Mode; label: string }[] = [
+  { key: "binary-to-denary", label: "Binary → Denary" },
+  { key: "denary-to-binary", label: "Denary → Binary" },
+];
 
 export default function BinaryPage() {
+  const [mode, setMode] = useState<Mode>("binary-to-denary");
+
   return (
     <div className="space-y-8">
       <Breadcrumbs
@@ -15,11 +26,39 @@ export default function BinaryPage() {
       />
 
       <div>
-        <h1 className="text-3xl font-bold tracking-tight">Binary &rarr; Decimal Converter</h1>
-        <p className="mt-2 text-muted">Same shape, different base &mdash; explore place value in powers of 2.</p>
+        <h1 className="text-3xl font-bold tracking-tight">
+          {mode === "binary-to-denary"
+            ? "Binary → Denary Converter"
+            : "Denary → Binary Converter"}
+        </h1>
+        <p className="mt-2 text-muted">
+          {mode === "binary-to-denary"
+            ? "Same shape, different base — explore place value in powers of 2."
+            : "Divide by 2. Track the remainder. Read bottom-up."}
+        </p>
       </div>
 
-      <BinaryConverterExplorer />
+      <div className="flex flex-wrap gap-2">
+        {MODES.map((m) => (
+          <button
+            key={m.key}
+            onClick={() => setMode(m.key)}
+            className={`rounded-full border-2 px-4 py-2 text-sm font-semibold transition-colors ${
+              mode === m.key
+                ? "border-unit-6 bg-unit-6 text-white"
+                : "border-unit-6/40 text-unit-6 hover:bg-unit-6-light"
+            }`}
+          >
+            {m.label}
+          </button>
+        ))}
+      </div>
+
+      {mode === "binary-to-denary" ? (
+        <BinaryConverterExplorer />
+      ) : (
+        <DenaryToBinaryExplorer />
+      )}
     </div>
   );
 }