70 lines
1.7 KiB
TypeScript
70 lines
1.7 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
|
|
interface ClockProps {
|
|
config: {
|
|
clock: {
|
|
enabled: boolean;
|
|
size: string;
|
|
font: string;
|
|
format: string;
|
|
};
|
|
};
|
|
getClockSizeClass: (size: string) => string;
|
|
}
|
|
|
|
const Clock: React.FC<ClockProps> = ({ config, getClockSizeClass }) => {
|
|
const [time, setTime] = useState(new Date());
|
|
|
|
useEffect(() => {
|
|
if (!config.clock.enabled) return;
|
|
|
|
const scheduleNext = () => {
|
|
const now = new Date();
|
|
const msToNextMinute = (60 - now.getSeconds()) * 1000 - now.getMilliseconds();
|
|
timeoutId = window.setTimeout(() => {
|
|
setTime(new Date());
|
|
intervalId = window.setInterval(() => setTime(new Date()), 60_000);
|
|
}, msToNextMinute);
|
|
};
|
|
|
|
let timeoutId = 0;
|
|
let intervalId = 0;
|
|
scheduleNext();
|
|
|
|
return () => {
|
|
if (timeoutId) window.clearTimeout(timeoutId);
|
|
if (intervalId) window.clearInterval(intervalId);
|
|
};
|
|
}, [config.clock.enabled]);
|
|
|
|
if (!config.clock.enabled) {
|
|
return null;
|
|
}
|
|
|
|
const formatTime = (date: Date) => {
|
|
const hours = date.getHours();
|
|
const minutes = date.getMinutes().toString().padStart(2, '0');
|
|
|
|
if (config.clock.format === 'HH:mm') {
|
|
return `${hours.toString().padStart(2, '0')}:${minutes}`;
|
|
}
|
|
|
|
const ampm = hours >= 12 ? 'PM' : 'AM';
|
|
const formattedHours = (hours % 12 || 12).toString();
|
|
return `${formattedHours}:${minutes} ${ampm}`;
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className={`liquid-clock-text whitespace-nowrap text-white font-bold ${getClockSizeClass(config.clock.size)}`}
|
|
style={{
|
|
fontFamily: config.clock.font,
|
|
}}
|
|
>
|
|
{formatTime(time)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Clock;
|