add quote widget

src/frontend/components/widgets/clock/ClockWidget.tsx

@@ -0,0 +1,84 @@
+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
+}