84 lines
2.3 KiB
TypeScript
84 lines
2.3 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { ClockWidgetData, WidgetExport } from '../../../types';
|
|
|
|
interface ClockWidgetProps {
|
|
widget: ClockWidgetData;
|
|
updateWidget: (id: string, update: Partial<ClockWidgetData>) => void
|
|
}
|
|
|
|
export const ClockWidgetComponent: React.FC<ClockWidgetProps> = ({ widget, updateWidget }) => {
|
|
const [time, setTime] = useState(new Date());
|
|
|
|
useEffect(() => {
|
|
const timer = setInterval(() => setTime(new Date()), 1000);
|
|
return () => clearInterval(timer);
|
|
}, []);
|
|
|
|
const formatTime = () => {
|
|
const options: Intl.DateTimeFormatOptions = {
|
|
hour: 'numeric',
|
|
minute: '2-digit',
|
|
timeZone: widget.timezone,
|
|
hour12: !widget.use24Hour
|
|
};
|
|
if (widget.showSeconds) {
|
|
options.second = '2-digit';
|
|
}
|
|
return new Intl.DateTimeFormat('en-US', options).format(time);
|
|
};
|
|
|
|
return <>
|
|
<div className="time">{formatTime()}</div>
|
|
<div className="timezone">{widget.timezone}</div>
|
|
</>;
|
|
};
|
|
|
|
export const ClockWidgetSettings = ({ widget, updateWidget }: ClockWidgetProps) => {
|
|
const handleToggleSeconds = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
updateWidget(widget.id, { showSeconds: e.target.checked });
|
|
};
|
|
|
|
const handleToggle24Hour = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
updateWidget(widget.id, { use24Hour: e.target.checked });
|
|
};
|
|
|
|
const handleTimezoneChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
|
|
updateWidget(widget.id, { timezone: e.target.value });
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div className="seconds-toggle">
|
|
<input
|
|
type="checkbox"
|
|
checked={widget.showSeconds}
|
|
onChange={handleToggleSeconds}
|
|
/>
|
|
Show seconds
|
|
</div>
|
|
<div className="hours-toggle">
|
|
<input
|
|
type="checkbox"
|
|
checked={widget.use24Hour}
|
|
onChange={handleToggle24Hour}
|
|
/>
|
|
Use 24-hour format
|
|
</div>
|
|
<label>
|
|
Timezone:
|
|
<select value={widget.timezone} onChange={handleTimezoneChange}>
|
|
{Intl.supportedValuesOf('timeZone').map(tz => (
|
|
<option key={tz} value={tz}>
|
|
{tz}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</label>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export const ClockWidget:WidgetExport = {
|
|
widget: ClockWidgetComponent,
|
|
settings: ClockWidgetSettings
|
|
} |