71 lines
1.8 KiB
TypeScript
71 lines
1.8 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { getClockSizeClass } from './utils/styleUtils';
|
|
|
|
interface ClockProps {
|
|
config: {
|
|
clock: {
|
|
enabled: boolean;
|
|
size: string;
|
|
font: string;
|
|
format: string;
|
|
};
|
|
};
|
|
}
|
|
|
|
const Clock: React.FC<ClockProps> = ({ config }) => {
|
|
const [time, setTime] = useState(new Date());
|
|
|
|
useEffect(() => {
|
|
if (!config.clock.enabled) return;
|
|
|
|
let timeoutId = 0;
|
|
const refresh = () => {
|
|
window.clearTimeout(timeoutId);
|
|
if (document.visibilityState !== 'visible') return;
|
|
const now = new Date();
|
|
setTime(now);
|
|
const msToNextMinute = (60 - now.getSeconds()) * 1000 - now.getMilliseconds();
|
|
timeoutId = window.setTimeout(refresh, msToNextMinute);
|
|
};
|
|
refresh();
|
|
document.addEventListener('visibilitychange', refresh);
|
|
window.addEventListener('focus', refresh);
|
|
|
|
return () => {
|
|
window.clearTimeout(timeoutId);
|
|
document.removeEventListener('visibilitychange', refresh);
|
|
window.removeEventListener('focus', refresh);
|
|
};
|
|
}, [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;
|