function MainComponent() { const [clocks, setClocks] = React.useState([ { id: 1, timezone: "UTC", format: 24, design: "default" } ]); const [newTimezone, setNewTimezone] = React.useState("UTC"); const [newFormat, setNewFormat] = React.useState(24); const [newDesign, setNewDesign] = React.useState("default"); const addClock = ()=>{ const newId = clocks.length ? clocks[clocks.length - 1].id + 1 : 1; setClocks([ ...clocks, { id: newId, timezone: newTimezone, format: newFormat, design: newDesign } ]); }; React.useEffect(()=>{ const interval = setInterval(()=>{ setClocks([ ...clocks ]); }, 1000); return ()=>clearInterval(interval); }, [ clocks ]); const getFormattedTime = (date, timezone, format)=>{ const options = { timeZone: timezone, year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: format === 12, weekday: 'long' }; return new Intl.DateTimeFormat('en-US', options).format(date).replace(",", ""); }; const Clock = ({ timezone, format, design })=>{ const now = new Date(); const formattedTime = getFormattedTime(now, timezone, format); const bgColor = design === "secondHand-red" ? "bg-red-500" : "bg-[#010101]"; const textColor = design === "secondHand-red" ? "text-[#fff]" : "text-[#010101]"; const clockSize = design === "large" ? "w-[400px] h-[400px]" : "w-[200px] h-[200px]"; return /*#__PURE__*/ React.createElement("div", { className: `flex flex-col items-center justify-center ${clockSize} ${bgColor} rounded-full p-4`, __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `text-2xl ${textColor} font-mono`, __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, timezone), /*#__PURE__*/ React.createElement("div", { className: `text-4xl ${textColor} font-mono`, __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, formattedTime)); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f0f0f0] p-4", __source: { fileName: "", lineNumber: 51, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("select", { name: "timezone", value: newTimezone, onChange: (e)=>setNewTimezone(e.target.value), className: "p-2 border border-[#010101] rounded mr-2", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "UTC", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, "UTC"), /*#__PURE__*/ React.createElement("option", { value: "America/New_York", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, "New York"), /*#__PURE__*/ React.createElement("option", { value: "Europe/London", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, "London"), /*#__PURE__*/ React.createElement("option", { value: "Asia/Tokyo", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, "Tokyo")), /*#__PURE__*/ React.createElement("select", { name: "format", value: newFormat, onChange: (e)=>setNewFormat(Number(e.target.value)), className: "p-2 border border-[#010101] rounded mr-2", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: 24, __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, "24 Hour"), /*#__PURE__*/ React.createElement("option", { value: 12, __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, "12 Hour")), /*#__PURE__*/ React.createElement("select", { name: "design", value: newDesign, onChange: (e)=>setNewDesign(e.target.value), className: "p-2 border border-[#010101] rounded mr-2", __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "default", __source: { fileName: "", lineNumber: 79, columnNumber: 11 }, __self: this }, "Default"), /*#__PURE__*/ React.createElement("option", { value: "large", __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }, "Large"), /*#__PURE__*/ React.createElement("option", { value: "secondHand-red", __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, "Second Hand Red")), /*#__PURE__*/ React.createElement("button", { onClick: addClock, className: "p-2 bg-[#010101] text-white rounded", __source: { fileName: "", lineNumber: 83, columnNumber: 9 }, __self: this }, "Add Clock")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-4", __source: { fileName: "", lineNumber: 90, columnNumber: 7 }, __self: this }, clocks.map((clock)=>/*#__PURE__*/ React.createElement(Clock, { key: clock.id, timezone: clock.timezone, format: clock.format, design: clock.design, __source: { fileName: "", lineNumber: 92, columnNumber: 11 }, __self: this })))); }