refactor: replace enabled prop with disabled in DigitalClock

src/containers/DigitalClock.tsx

@@ -2,15 +2,15 @@ import { useState } from "react";
 import { dateToDigital, digitalToDate } from "../utils";
 
 interface DigitalClockProps {
-  enabled: boolean;
   currentTime: Date;
   onTimeChange: (time: Date) => void;
+  disabled?: boolean;
 }
 
 export function DigitalClock({
-  enabled,
   currentTime,
   onTimeChange,
+  disabled = false,
 }: DigitalClockProps) {
   const [inputValue, setInputValue] = useState(dateToDigital(currentTime));
 
@@ -23,8 +23,6 @@ export function DigitalClock({
     }
   };
 
-  if (!enabled) return null;
-
   return (
     <div>
       <span data-testid="digital-clock">{dateToDigital(currentTime)}</span>
@@ -34,6 +32,7 @@ export function DigitalClock({
         value={inputValue}
         onChange={handleChange}
         placeholder="HH:MM:SS"
+        disabled={disabled}
       />
     </div>
   );

src/containers/TimeConverter.tsx

@@ -7,7 +7,6 @@ import { dateToBerlin } from "../utils";
 export function TimeConverter() {
   const { currentTime, setCurrentTime } = useCurrentTime();
   const [useSystemTime, setUseSystemTime] = useState(false);
-  const enabled = !useSystemTime;
   const berlinClock = dateToBerlin(currentTime);
 
   return (
@@ -26,11 +25,11 @@ export function TimeConverter() {
         />
         Use system time
       </label>
-      <BerlinClock enabled={enabled} clock={berlinClock} />
+      <BerlinClock enabled={true} clock={berlinClock} />
       <DigitalClock
-        enabled={enabled}
         currentTime={currentTime}
         onTimeChange={setCurrentTime}
+        disabled={useSystemTime}
       />
     </div>
   );