71 lines
1.6 KiB
TypeScript
71 lines
1.6 KiB
TypeScript
|
|
|
|
import { Input } from '@/ui/Input';
|
|
|
|
interface DurationFieldProps {
|
|
label: string;
|
|
value: number | '';
|
|
onChange: (value: number | '') => void;
|
|
helperText?: string;
|
|
required?: boolean;
|
|
disabled?: boolean;
|
|
unit?: 'minutes' | 'laps';
|
|
error?: string;
|
|
}
|
|
|
|
export function DurationField({
|
|
label,
|
|
value,
|
|
onChange,
|
|
helperText,
|
|
required,
|
|
disabled,
|
|
unit = 'minutes',
|
|
error,
|
|
}: DurationFieldProps) {
|
|
const handleChange = (raw: string) => {
|
|
if (raw.trim() === '') {
|
|
onChange('');
|
|
return;
|
|
}
|
|
|
|
const parsed = parseInt(raw, 10);
|
|
if (Number.isNaN(parsed) || parsed <= 0) {
|
|
onChange('');
|
|
return;
|
|
}
|
|
|
|
onChange(parsed);
|
|
};
|
|
|
|
const unitLabel = unit === 'laps' ? 'laps' : 'min';
|
|
|
|
return (
|
|
<div className="space-y-1">
|
|
<label className="block text-sm font-medium text-gray-300">
|
|
{label}
|
|
{required && <span className="text-warning-amber ml-1">*</span>}
|
|
</label>
|
|
<div className="flex items-center gap-2">
|
|
<div className="flex-1">
|
|
<Input
|
|
type="number"
|
|
value={value === '' ? '' : String(value)}
|
|
onChange={(e) => handleChange(e.target.value)}
|
|
disabled={disabled}
|
|
min={1}
|
|
className="pr-16"
|
|
error={!!error}
|
|
/>
|
|
</div>
|
|
<span className="text-xs text-gray-400 -ml-14">{unitLabel}</span>
|
|
</div>
|
|
{helperText && (
|
|
<p className="text-xs text-gray-500">{helperText}</p>
|
|
)}
|
|
{error && (
|
|
<p className="text-xs text-warning-amber mt-1">{error}</p>
|
|
)}
|
|
</div>
|
|
);
|
|
} |