function MainComponent() { const [tokyoTime, setTokyoTime] = React.useState(''); const [times, setTimes] = React.useState({}); const [loading, setLoading] = React.useState(false); const timeZones = [ { city: 'Tokyo', country: 'Japan' }, { city: 'Beijing', country: 'China' }, { city: 'Delhi', country: 'India' }, { city: 'Istanbul', country: 'Turkey' }, { city: 'Berlin', country: 'Germany' }, { city: 'London', country: 'UK' }, { city: 'New York', country: 'USA' }, { city: 'Sao Paulo', country: 'Brazil' }, { city: 'Vancouver', country: 'Canada' }, { city: 'Honolulu', country: 'USA' } ]; React.useEffect(()=>{ if (tokyoTime) { setLoading(true); const newTimes = { Tokyo: tokyoTime }; timeZones.slice(1).forEach(({ city })=>{ newTimes[city] = '00:00'; }); const fetchTimes = async ()=>{ for(let i = 0; i < 9; i++){ for(let j = 1; j < timeZones.length; j++){ const { city, country } = timeZones[j]; const response = await fetch('/integrations/anthropic-claude-sonnet/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: `The time in Tokyo is ${tokyoTime}. What is the current time in ${city}, ${country}? Please consider daylight saving time if applicable. Respond with only the time in HH:MM format.` } ] }) }); const data = await response.json(); const aiTime = data.choices[0].message.content.trim(); if (aiTime.match(/^\d{2}:\d{2}$/)) { newTimes[city] = aiTime; } setTimes({ ...newTimes }); } } setLoading(false); }; fetchTimes(); } }, [ tokyoTime ]); const handleTokyoTimeChange = (e)=>{ setTokyoTime(e.target.value); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 p-8 font-roboto", __source: { fileName: "", lineNumber: 65, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-center mb-8", __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this }, "World Clock Tool"), /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl mx-auto bg-white rounded-lg shadow-md p-6", __source: { fileName: "", lineNumber: 68, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "tokyoTime", className: "block text-lg font-semibold mb-2", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, "Enter your time in Tokyo, Japan:"), /*#__PURE__*/ React.createElement("input", { type: "time", id: "tokyoTime", name: "tokyoTime", className: "input input-bordered w-full", value: tokyoTime, onChange: handleTokyoTimeChange, __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this })), loading && /*#__PURE__*/ React.createElement("div", { className: "text-center mb-4", __source: { fileName: "", lineNumber: 81, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "loading loading-spinner loading-lg", __source: { fileName: "", lineNumber: 81, columnNumber: 55 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", __source: { fileName: "", lineNumber: 83, columnNumber: 9 }, __self: this }, timeZones.map(({ city, country })=>/*#__PURE__*/ React.createElement(TimeZoneCard, { key: city, city: city, country: country, time: times[city] || '00:00', __source: { fileName: "", lineNumber: 85, columnNumber: 13 }, __self: this }))))); } function TimeZoneCard({ city, country, time }) { return /*#__PURE__*/ React.createElement("div", { className: "card bg-base-100 shadow-xl", __source: { fileName: "", lineNumber: 95, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "card-body", __source: { fileName: "", lineNumber: 96, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "card-title", __source: { fileName: "", lineNumber: 97, columnNumber: 9 }, __self: this }, city, ", ", country), /*#__PURE__*/ React.createElement("p", { className: "text-3xl font-bold text-primary", __source: { fileName: "", lineNumber: 98, columnNumber: 9 }, __self: this }, time))); }

World Clock Tool

Tokyo, Japan

Beijing, China

Delhi, India

Istanbul, Turkey

Berlin, Germany

London, UK

New York, USA

Sao Paulo, Brazil

Vancouver, Canada

Honolulu, USA