54 lines
1.2 KiB
TypeScript
54 lines
1.2 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(() => {
|
|
const timerId = setInterval(() => setTime(new Date()), 1000);
|
|
return () => clearInterval(timerId);
|
|
}, []);
|
|
|
|
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={`text-white font-bold ${getClockSizeClass(config.clock.size)}`}
|
|
style={{
|
|
textShadow: '0 2px 4px rgba(0,0,0,0.5)',
|
|
fontFamily: config.clock.font,
|
|
}}
|
|
>
|
|
{formatTime(time)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Clock;
|