Initial Commit

2026-03-01 18:50:29 -04:00
parent 261c52d602
commit 364facd9f0
69 changed files with 7829 additions and 87 deletions
--- a/components/practice/fraction-input.tsx
+++ b/components/practice/fraction-input.tsx
@@ -0,0 +1,104 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+
+interface FractionInputProps {
+  numerator: string;
+  denominator: string;
+  onNumeratorChange: (value: string) => void;
+  onDenominatorChange: (value: string) => void;
+  disabled?: boolean;
+  className?: string;
+}
+
+export function FractionInput({
+  numerator,
+  denominator,
+  onNumeratorChange,
+  onDenominatorChange,
+  disabled = false,
+  className,
+}: FractionInputProps) {
+  return (
+    <div className={cn("inline-flex flex-col items-center gap-0.5", className)}>
+      <input
+        type="text"
+        inputMode="numeric"
+        pattern="[0-9-]*"
+        value={numerator}
+        onChange={(e) => onNumeratorChange(e.target.value)}
+        disabled={disabled}
+        className="w-16 rounded-lg border border-border bg-surface px-2 py-1.5 text-center text-lg font-bold focus:border-unit-1 focus:outline-none"
+        placeholder="?"
+        aria-label="Numerator"
+      />
+      <div className="h-0.5 w-16 bg-foreground" />
+      <input
+        type="text"
+        inputMode="numeric"
+        pattern="[0-9-]*"
+        value={denominator}
+        onChange={(e) => onDenominatorChange(e.target.value)}
+        disabled={disabled}
+        className="w-16 rounded-lg border border-border bg-surface px-2 py-1.5 text-center text-lg font-bold focus:border-unit-1 focus:outline-none"
+        placeholder="?"
+        aria-label="Denominator"
+      />
+    </div>
+  );
+}
+
+interface DecimalInputProps {
+  value: string;
+  onChange: (value: string) => void;
+  disabled?: boolean;
+  className?: string;
+}
+
+export function DecimalInput({ value, onChange, disabled, className }: DecimalInputProps) {
+  return (
+    <input
+      type="text"
+      inputMode="decimal"
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      disabled={disabled}
+      className={cn(
+        "w-28 rounded-lg border border-border bg-surface px-3 py-2 text-center text-lg font-bold focus:border-unit-2 focus:outline-none",
+        className,
+      )}
+      placeholder="?"
+      aria-label="Answer"
+    />
+  );
+}
+
+interface RatioInputProps {
+  parts: string[];
+  onChange: (index: number, value: string) => void;
+  disabled?: boolean;
+  className?: string;
+}
+
+export function RatioInput({ parts, onChange, disabled, className }: RatioInputProps) {
+  return (
+    <div className={cn("inline-flex items-center gap-1", className)}>
+      {parts.map((p, i) => (
+        <span key={i} className="flex items-center gap-1">
+          {i > 0 && <span className="text-lg font-bold text-muted">:</span>}
+          <input
+            type="text"
+            inputMode="numeric"
+            pattern="[0-9]*"
+            value={p}
+            onChange={(e) => onChange(i, e.target.value)}
+            disabled={disabled}
+            className="w-14 rounded-lg border border-border bg-surface px-2 py-2 text-center text-lg font-bold focus:border-unit-4 focus:outline-none"
+            placeholder="?"
+            aria-label={`Part ${i + 1}`}
+          />
+        </span>
+      ))}
+    </div>
+  );
+}