From f3382717f3c720d4f8108e3d19cac27916ba9004 Mon Sep 17 00:00:00 2001
From: Tien Ngo <sitienbmt@gmail.com>
Date: Mon, 29 Dec 2025 15:23:54 +0700
Subject: [PATCH] feat: Add new UI components for number input, time input, and
 calculator mode selection.

---
 src/components/CalculatorMode.jsx | 21 ++++++++-----
 src/components/NumberInput.jsx    | 49 +++++++++++++++++++++++--------
 src/components/TimeInput.jsx      |  6 ++--
 3 files changed, 53 insertions(+), 23 deletions(-)

diff --git a/src/components/CalculatorMode.jsx b/src/components/CalculatorMode.jsx
index 8d7e27f..b53e120 100644
--- a/src/components/CalculatorMode.jsx
+++ b/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>
     );
diff --git a/src/components/NumberInput.jsx b/src/components/NumberInput.jsx
index 9243924..0d0493d 100644
--- a/src/components/NumberInput.jsx
+++ b/src/components/NumberInput.jsx
@@ -1,4 +1,4 @@
-import { InputNumber } from 'antd';
+import { InputNumber, Button, Flex } from 'antd';
 
 export default function NumberInput({ label, value, onChange, unit, min = 0, step = 1 }) {
     const handleChange = (newValue) => {
@@ -6,20 +6,45 @@ export default function NumberInput({ label, value, onChange, unit, min = 0, ste
         onChange(numValue);
     };
 
+    const handleDecrement = () => {
+        handleChange(value - step);
+    };
+
+    const handleIncrement = () => {
+        handleChange(value + step);
+    };
+
     return (
         <div className="form-row">
             <label className="form-label">{label}</label>
-            <InputNumber
-                value={value}
-                onChange={handleChange}
-                min={min}
-                step={step}
-                placeholder="0"
-                addonAfter={unit}
-                size="large"
-                style={{ width: '100%' }}
-                controls={false}
-            />
+            <Flex gap="small">
+                <Button
+                    onClick={handleDecrement}
+                    size="large"
+                    disabled={value <= min}
+                    style={{ width: 44, padding: 0 }}
+                >
+                    -
+                </Button>
+                <InputNumber
+                    value={value}
+                    onChange={handleChange}
+                    min={min}
+                    step={step}
+                    placeholder="0"
+                    suffix={<span style={{ color: '#999' }}>{unit}</span>}
+                    size="large"
+                    style={{ flex: 1 }}
+                    controls={false}
+                />
+                <Button
+                    onClick={handleIncrement}
+                    size="large"
+                    style={{ width: 44, padding: 0 }}
+                >
+                    +
+                </Button>
+            </Flex>
         </div>
     );
 }
diff --git a/src/components/TimeInput.jsx b/src/components/TimeInput.jsx
index 2ca09a4..6d72706 100644
--- a/src/components/TimeInput.jsx
+++ b/src/components/TimeInput.jsx
@@ -20,7 +20,7 @@ export default function TimeInput({ label, hours, minutes, seconds, onChange })
                     onChange={(value) => handleChange('hours', value)}
                     min={0}
                     placeholder="0"
-                    addonAfter="h"
+                    suffix={<span style={{ color: '#999' }}>h</span>}
                     size="large"
                     style={{ width: '33.33%' }}
                     controls={false}
@@ -31,7 +31,7 @@ export default function TimeInput({ label, hours, minutes, seconds, onChange })
                     min={0}
                     max={59}
                     placeholder="0"
-                    addonAfter="m"
+                    suffix={<span style={{ color: '#999' }}>m</span>}
                     size="large"
                     style={{ width: '33.33%' }}
                     controls={false}
@@ -42,7 +42,7 @@ export default function TimeInput({ label, hours, minutes, seconds, onChange })
                     min={0}
                     max={59}
                     placeholder="0"
-                    addonAfter="s"
+                    suffix={<span style={{ color: '#999' }}>s</span>}
                     size="large"
                     style={{ width: '33.34%' }}
                     controls={false}