website refactor

apps/website/ui/DurationField.tsx

@@ -0,0 +1,71 @@
+'use client';
+
+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 default 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>
+  );
+}