function MainComponent() { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gradient-to-b from-blue-500 to-purple-600 p-4", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-white mb-8 font-roboto writing-vertical", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, "World Time"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(TimeCard, { city: "New York", timeZone: "America/New_York", color: "#FF6B6B", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement(TimeCard, { city: "London", timeZone: "Europe/London", color: "#4ECDC4", __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement(TimeCard, { city: "Tokyo", timeZone: "Asia/Tokyo", color: "#45B7D1", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement(TimeCard, { city: "Sydney", timeZone: "Australia/Sydney", color: "#FFA07A", __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement(TimeCard, { city: "Dubai", timeZone: "Asia/Dubai", color: "#98D8C8", __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement(TimeCard, { city: "Paris", timeZone: "Europe/Paris", color: "#F7B267", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }))); } function TimeCard({ city, timeZone, color }) { return /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-md p-6 flex flex-col items-center", __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4 font-crimson-text writing-vertical", style: { color }, __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, city), /*#__PURE__*/ React.createElement("div", { className: "relative w-[200px] h-[200px]", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(AnalogClock, { timeZone: timeZone, color: color, __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500 mt-4 font-roboto writing-vertical", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, timeZone)); } function AnalogClock({ timeZone, color }) { const [time, setTime] = React.useState(new Date()); React.useEffect(()=>{ const timer = setInterval(()=>{ setTime(new Date()); }, 1000); return ()=>clearInterval(timer); }, []); const hour = time.toLocaleString('en-US', { hour: 'numeric', hour12: false, timeZone }); const minute = time.toLocaleString('en-US', { minute: 'numeric', timeZone }); const second = time.toLocaleString('en-US', { second: 'numeric', timeZone }); const hourDegrees = hour % 12 / 12 * 360 + minute / 60 * 30; const minuteDegrees = minute / 60 * 360; const secondDegrees = second / 60 * 360; return /*#__PURE__*/ React.createElement("div", { className: "relative w-full h-full rounded-full", style: { border: `4px solid ${color}` }, __source: { fileName: "", lineNumber: 49, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 flex items-center justify-center", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, [ ...Array.from({ length: 12 }) ].map((_, i)=>/*#__PURE__*/ React.createElement("div", { key: i, className: "absolute w-1 h-4", style: { backgroundColor: color, transform: `rotate(${i * 30}deg) translateY(-95px)` }, __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "absolute top-1/2 left-1/2 w-1 h-[35%] origin-bottom", style: { backgroundColor: color, transform: `translate(-50%, -100%) rotate(${hourDegrees}deg)` }, __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute top-1/2 left-1/2 w-1 h-[45%] origin-bottom", style: { backgroundColor: color, transform: `translate(-50%, -100%) rotate(${minuteDegrees}deg)` }, __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute top-1/2 left-1/2 w-0.5 h-[50%] origin-bottom", style: { backgroundColor: color, transform: `translate(-50%, -100%) rotate(${secondDegrees}deg)` }, __source: { fileName: "", lineNumber: 70, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute top-1/2 left-1/2 w-3 h-3 rounded-full transform -translate-x-1/2 -translate-y-1/2", style: { backgroundColor: color }, __source: { fileName: "", lineNumber: 74, columnNumber: 7 }, __self: this })); } /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 79, columnNumber: 1 }, __self: this }, ` .writing-vertical { writing-mode: vertical-rl; text-orientation: upright; } `);