feat: add digital clock input and time converter integration

src/containers/DigitalClock.tsx

@@ -1,13 +1,36 @@
 import { useState } from 'react';
-import { useCurrentTime } from '../hooks/useCurrentTime';
-import { dateToDigital } from '../utils';
+import { dateToDigital, digitalToDate } from '../utils';
 
 interface DigitalClockProps {
   enabled: boolean;
+  currentTime: Date;
+  onTimeChange: (time: Date) => void;
 }
 
-export function DigitalClock({ enabled }: DigitalClockProps) {
-  const { currentTime } = useCurrentTime();
-  const digital = dateToDigital(currentTime);
-  return null;
+export function DigitalClock({ enabled, currentTime, onTimeChange }: DigitalClockProps) {
+  const [inputValue, setInputValue] = useState(dateToDigital(currentTime));
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    setInputValue(value);
+    const date = digitalToDate(value);
+    if (!isNaN(date.getTime())) {
+      onTimeChange(date);
+    }
+  };
+
+  if (!enabled) return null;
+
+  return (
+    <div>
+      <span data-testid="digital-clock">{dateToDigital(currentTime)}</span>
+      <input
+        data-testid="time-input"
+        type="text"
+        value={inputValue}
+        onChange={handleChange}
+        placeholder="HH:MM:SS"
+      />
+    </div>
+  );
 }

src/containers/TimeConverter.tsx

@@ -4,7 +4,30 @@ import { DigitalClock } from './DigitalClock';
 import { useCurrentTime } from '../hooks/useCurrentTime';
 
 export function TimeConverter() {
+  const { currentTime, setCurrentTime } = useCurrentTime();
   const [useSystemTime, setUseSystemTime] = useState(false);
-  // When useSystemTime is true, both BerlinClock and DigitalClock are disabled.
-  return null;
+
+  const handleTimeChange = (newTime: Date) => {
+    setCurrentTime(newTime);
+  };
+
+  return (
+    <div>
+      <label>
+        <input
+          type="checkbox"
+          data-testid="use-system-time"
+          checked={useSystemTime}
+          onChange={(e) => setUseSystemTime(e.target.checked)}
+        />
+        Use system time
+      </label>
+      <BerlinClock enabled={!useSystemTime} />
+      <DigitalClock
+        enabled={!useSystemTime}
+        currentTime={currentTime}
+        onTimeChange={handleTimeChange}
+      />
+    </div>
+  );
 }