65 lines
2.0 KiB
TypeScript
65 lines
2.0 KiB
TypeScript
"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
|
|
items={[
|
|
{ label: "Lessons", href: "/lessons" },
|
|
{ label: "Unit 6: Number System", href: "/lessons/unit-6-number-system" },
|
|
{ label: "Binary" },
|
|
]}
|
|
/>
|
|
|
|
<div>
|
|
<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>
|
|
|
|
<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>
|
|
);
|
|
}
|