105 lines
3.0 KiB
TypeScript
105 lines
3.0 KiB
TypeScript
"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>
|
|
);
|
|
}
|