feat: Add new UI components for number input, time input, and calculator mode selection.

src/components/CalculatorMode.jsx

@@ -1,22 +1,27 @@
-import { Select } from 'antd';
+import { Segmented } from 'antd';
 
 export default function CalculatorMode({ value, onChange }) {
     return (
         <div className="form-row">
-            <label htmlFor="calculator-mode" className="form-label">
+            <label className="form-label" style={{ display: 'block', marginBottom: 8 }}>
                 Calculate
             </label>
-            <Select
-                id="calculator-mode"
+            <Segmented
                 value={value}
                 onChange={onChange}
+                block
                 size="large"
-                style={{ width: '100%' }}
                 options={[
-                    { value: 'shooting-interval', label: 'Shooting interval' },
-                    { value: 'clip-length', label: 'Clip length' },
-                    { value: 'event-duration', label: 'Event duration' },
+                    { value: 'shooting-interval', label: 'Interval' },
+                    { value: 'clip-length', label: 'Clip' },
+                    { value: 'event-duration', label: 'Event' },
                 ]}
+                style={{
+                    backgroundColor: '#F8F9FA',
+                    padding: 4,
+                    borderRadius: 8,
+                    border: '1px solid #DEE2E6'
+                }}
             />
         </div>
     );