boomjacky/berlin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add Berlin Clock layout and styling with Orbitron font

Browse Source
This commit is contained in:
Loic Coenen
2026-06-25 10:31:10 +02:00
committed by Loic Coenen (aider)
parent abf8b13fc7
commit 3fed6dc168
7 changed files with 80 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/containers/BerlinClock.tsx
View File

@@ -11,17 +11,22 @@ export function BerlinClock({ enabled, clock }: BerlinClockProps) {
if (!enabled) return null;
return (
<div>
<div
data-testid="seconds-row"
style={{ display: "flex", gap: 2, marginBottom: 5 }}
>
<Lamp state={clock.secondsRow[0]} id="seconds-lamp" variant="alone" />
<div className="berlin-clock" style={{ display: "flex", flexDirection: "column", alignItems: "center", width: "100%" }}>
<div className="seconds-lamp-container" data-testid="seconds-row" style={{ width: "100%", display: "flex", justifyContent: "center" }}>
<Lamp state={clock.secondsRow[0]} variant="alone" id="seconds-lamp" />
</div>
<div className="lamp-row" style={{ width: "100%" }}>
<LampLine states={clock.fiveHours} rowTestId="five-hours-row" />
</div>
<div className="lamp-row" style={{ width: "100%" }}>
<LampLine states={clock.oneHour} rowTestId="single-hours-row" />
</div>
<div className="lamp-row" style={{ width: "100%" }}>
<LampLine states={clock.fiveMinutes} rowTestId="five-minutes-row" />
</div>
<div className="lamp-row" style={{ width: "100%" }}>
<LampLine states={clock.oneMinute} rowTestId="single-minutes-row" />
</div>
<LampLine states={clock.fiveHours} rowTestId="five-hours-row" />
<LampLine states={clock.oneHour} rowTestId="single-hours-row" />
<LampLine states={clock.fiveMinutes} rowTestId="five-minutes-row" />
<LampLine states={clock.oneMinute} rowTestId="single-minutes-row" />
</div>
);
}

12
src/containers/TimeConverter.tsx
View File

@@ -19,6 +19,12 @@ export function TimeConverter() {
return (
<div>
<BerlinClock enabled={true} clock={berlinClock} />
<DigitalClock
currentTime={currentTime}
onTimeChange={setCurrentTime}
disabled={useSystemTime}
/>
<label>
<input
type="checkbox"
@@ -33,12 +39,6 @@ export function TimeConverter() {
/>
Use system time
</label>
<BerlinClock enabled={true} clock={berlinClock} />
<DigitalClock
currentTime={currentTime}
onTimeChange={setCurrentTime}
disabled={useSystemTime}
/>
</div>
);
}