website refactor

apps/website/ui/DurationField.tsx

@@ -1,71 +1,73 @@
+import React, { ChangeEvent } from 'react';
+import { Box } from './primitives/Box';
+import { Text } from './Text';
+import { Input } from './Input';
 
-
-import { Input } from '@/ui/Input';
-
-interface DurationFieldProps {
+export interface DurationFieldProps {
   label: string;
-  value: number | '';
-  onChange: (value: number | '') => void;
-  helperText?: string;
-  required?: boolean;
+  value: number; // in minutes
+  onChange: (value: number) => void;
   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;
-    }
+export const DurationField = ({ 
+  label, 
+  value, 
+  onChange, 
+  disabled = false,
+  error 
+}: DurationFieldProps) => {
+  const hours = Math.floor(value / 60);
+  const minutes = value % 60;
 
-    const parsed = parseInt(raw, 10);
-    if (Number.isNaN(parsed) || parsed <= 0) {
-      onChange('');
-      return;
-    }
-
-    onChange(parsed);
+  const handleHoursChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const h = parseInt(e.target.value) || 0;
+    onChange(h * 60 + minutes);
   };
 
-  const unitLabel = unit === 'laps' ? 'laps' : 'min';
+  const handleMinutesChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const m = parseInt(e.target.value) || 0;
+    onChange(hours * 60 + m);
+  };
 
   return (
-    <div className="space-y-1">
-      <label className="block text-sm font-medium text-gray-300">
+    <Box>
+      <Text as="label" size="xs" weight="bold" variant="low" block marginBottom={1.5}>
         {label}
-        {required && <span className="text-warning-amber ml-1">*</span>}
-      </label>
-      <div className="flex items-center gap-2">
-        <div className="flex-1">
+      </Text>
+      <Box display="flex" alignItems="center" gap={4}>
+        <Box display="flex" alignItems="center" gap={2}>
           <Input
             type="number"
-            value={value === '' ? '' : String(value)}
-            onChange={(e) => handleChange(e.target.value)}
+            value={hours}
+            onChange={handleHoursChange}
             disabled={disabled}
-            min={1}
-            className="pr-16"
-            variant={error ? 'error' : 'default'}
+            min={0}
+            style={{ width: '4rem' }}
           />
-        </div>
-        <span className="text-xs text-gray-400 -ml-14">{unitLabel}</span>
-      </div>
-      {helperText && (
-        <p className="text-xs text-gray-500">{helperText}</p>
-      )}
+          <Text size="sm" variant="low">h</Text>
+        </Box>
+        <Box display="flex" alignItems="center" gap={2}>
+          <Input
+            type="number"
+            value={minutes}
+            onChange={handleMinutesChange}
+            disabled={disabled}
+            min={0}
+            max={59}
+            style={{ width: '4rem' }}
+          />
+          <Text size="sm" variant="low">m</Text>
+        </Box>
+      </Box>
       {error && (
-        <p className="text-xs text-warning-amber mt-1">{error}</p>
+        <Box marginTop={1}>
+          <Text size="xs" variant="critical">
+            {error}
+          </Text>
+        </Box>
       )}
-    </div>
+    </Box>
   );
-}
+};