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 { QuaternaryToDenaryExplorer } from "@/components/explorers/quaternary-to-denary-explorer";
|
|
import { DenaryToQuaternaryExplorer } from "@/components/explorers/denary-to-quaternary-explorer";
|
|
|
|
type Mode = "quaternary-to-denary" | "denary-to-quaternary";
|
|
|
|
const MODES: { key: Mode; label: string }[] = [
|
|
{ key: "quaternary-to-denary", label: "Quaternary → Denary" },
|
|
{ key: "denary-to-quaternary", label: "Denary → Quaternary" },
|
|
];
|
|
|
|
export default function QuaternaryPage() {
|
|
const [mode, setMode] = useState<Mode>("quaternary-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: "Quaternary" },
|
|
]}
|
|
/>
|
|
|
|
<div>
|
|
<h1 className="text-3xl font-bold tracking-tight">
|
|
{mode === "quaternary-to-denary"
|
|
? "Quaternary → Denary Converter"
|
|
: "Denary → Quaternary Converter"}
|
|
</h1>
|
|
<p className="mt-2 text-muted">
|
|
{mode === "quaternary-to-denary"
|
|
? "Same shape, different base — explore place value in powers of 4."
|
|
: "Divide by 4. 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 === "quaternary-to-denary" ? (
|
|
<QuaternaryToDenaryExplorer />
|
|
) : (
|
|
<DenaryToQuaternaryExplorer />
|
|
)}
|
|
</div>
|
|
);
|
|
}
|