first commit

src/components/TimeInput.jsx

@@ -0,0 +1,53 @@
+import { InputNumber, Space } from 'antd';
+
+export default function TimeInput({ label, hours, minutes, seconds, onChange }) {
+    const handleChange = (field, value) => {
+        // Ensure non-negative values
+        const numValue = Math.max(0, value || 0);
+        onChange({
+            hours: field === 'hours' ? numValue : hours,
+            minutes: field === 'minutes' ? numValue : minutes,
+            seconds: field === 'seconds' ? numValue : seconds,
+        });
+    };
+
+    return (
+        <div className="form-row">
+            <label className="form-label">{label}</label>
+            <Space.Compact style={{ width: '100%' }} size="large">
+                <InputNumber
+                    value={hours}
+                    onChange={(value) => handleChange('hours', value)}
+                    min={0}
+                    placeholder="0"
+                    addonAfter="h"
+                    size="large"
+                    style={{ width: '33.33%' }}
+                    controls={false}
+                />
+                <InputNumber
+                    value={minutes}
+                    onChange={(value) => handleChange('minutes', value)}
+                    min={0}
+                    max={59}
+                    placeholder="0"
+                    addonAfter="m"
+                    size="large"
+                    style={{ width: '33.33%' }}
+                    controls={false}
+                />
+                <InputNumber
+                    value={seconds}
+                    onChange={(value) => handleChange('seconds', value)}
+                    min={0}
+                    max={59}
+                    placeholder="0"
+                    addonAfter="s"
+                    size="large"
+                    style={{ width: '33.34%' }}
+                    controls={false}
+                />
+            </Space.Compact>
+        </div>
+    );
+}