wehub-resource-sync
45 lines
1.6 KiB
TypeScript
45 lines
1.6 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import * as TimeService from '../TimeService';
|
|
import { SIMULATOR_CONFIG } from '../data';
|
|
import { useLocale } from '../locale';
|
|
const { clockFontSize } = SIMULATOR_CONFIG.framework;
|
|
|
|
export const HomeClockWidget: React.FC<{ onClick?: () => void }> = ({ onClick }) => {
|
|
const locale = useLocale();
|
|
const [timeStr, setTimeStr] = useState(TimeService.formatTime());
|
|
const [dateStr, setDateStr] = useState(TimeService.formatDate());
|
|
const [dayOfWeek, setDayOfWeek] = useState(TimeService.getDayOfWeek());
|
|
|
|
useEffect(() => {
|
|
const update = () => {
|
|
setTimeStr(TimeService.formatTime());
|
|
setDateStr(TimeService.formatDate());
|
|
setDayOfWeek(TimeService.getDayOfWeek());
|
|
};
|
|
update();
|
|
const interval = setInterval(update, 1000);
|
|
return () => clearInterval(interval);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
setDateStr(TimeService.formatDate());
|
|
setDayOfWeek(TimeService.getDayOfWeek());
|
|
}, [locale]);
|
|
|
|
return (
|
|
<div className="flex flex-col items-center mb-6">
|
|
<div className="text-gray-200 text-sm mb-1">
|
|
{dateStr} {dayOfWeek}
|
|
</div>
|
|
<div
|
|
role={onClick ? 'button' : undefined}
|
|
className={`text-white font-extralight leading-none ${onClick ? 'cursor-pointer active:opacity-80 transition-opacity' : ''}`}
|
|
style={{ fontSize: `${clockFontSize}px` }}
|
|
onClick={onClick}
|
|
>
|
|
{timeStr}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|