function QiblaCompass() { const [qiblaDirection, setQiblaDirection] = useState(null); const [deviceOrientation, setDeviceOrientation] = useState(0); useEffect(()=>{ async function fetchQiblaDirection() { const response = await fetch("/api/qibla-direction", { method: "POST" }); const data = await response.json(); setQiblaDirection(data.direction); } fetchQiblaDirection(); }, []); useEffect(()=>{ if (!window.DeviceOrientationEvent) return; const handleOrientation = (event)=>{ const alpha = event.alpha || 0; setDeviceOrientation(alpha); }; window.addEventListener("deviceorientation", handleOrientation, true); return ()=>window.removeEventListener("deviceorientation", handleOrientation, true); }, []); const compassRotation = deviceOrientation; const arrowRotation = qiblaDirection ? qiblaDirection - compassRotation : 0; return /*#__PURE__*/ React.createElement("div", { className: "relative w-[300px] h-[300px] mx-auto", __source: { fileName: "", lineNumber: 33, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 rounded-full border-4 border-gray-200 bg-white shadow-lg", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 flex items-center justify-center", style: { transform: `rotate(${compassRotation}deg)` }, __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute w-full h-full", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-4 left-1/2 -translate-x-1/2 text-gray-700", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, "N"), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-4 left-1/2 -translate-x-1/2 text-gray-700", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, "S"), /*#__PURE__*/ React.createElement("div", { className: "absolute left-4 top-1/2 -translate-y-1/2 text-gray-700", __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }, "W"), /*#__PURE__*/ React.createElement("div", { className: "absolute right-4 top-1/2 -translate-y-1/2 text-gray-700", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, "E"))), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 flex items-center justify-center", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-1 h-[140px] bg-green-500 origin-bottom transform -translate-y-[35px]", style: { transform: `rotate(${arrowRotation}deg) translateY(-35px)` }, __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-4 h-4 bg-green-500 absolute -top-2 left-1/2 transform -translate-x-1/2 rotate-45", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }))))); } function QiblaCompassStory() { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-50 p-4 font-roboto", __source: { fileName: "", lineNumber: 71, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-2xl mx-auto mt-8", __source: { fileName: "", lineNumber: 72, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-lg p-6", __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-center mb-6", __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }, "Qibla Direction"), /*#__PURE__*/ React.createElement(QiblaCompass, { __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-center mt-4 text-gray-600", __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this }, "Point your device towards the arrow to find the Qibla direction")))); } function MainComponent() { const [settings, setSettings] = useState({ notifyFajr: true, notifyDhuhr: true, notifyAsr: true, notifyMaghrib: true, notifyIsha: true, location: "", useDeviceLocation: true }); const [loading, setLoading] = useState(false); const handleChange = (e)=>{ const { name, type, checked, value } = e.target; setSettings((prev)=>({ ...prev, [name]: type === "checkbox" ? checked : value })); }; const handleSubmit = async (e)=>{ e.preventDefault(); setLoading(true); try { await fetch("/api/save-preferences", { method: "POST", body: JSON.stringify(settings) }); } catch (error) { console.error(error); } finally{ setLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-50 p-4 font-roboto", __source: { fileName: "", lineNumber: 38, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-2xl mx-auto mt-8", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-lg p-6", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-gray-800 mb-6", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, "Settings"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "space-y-6", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold text-gray-700", __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this }, "Prayer Notifications"), /*#__PURE__*/ React.createElement("div", { className: "space-y-3", __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }, [ "Fajr", "Dhuhr", "Asr", "Maghrib", "Isha" ].map((prayer)=>/*#__PURE__*/ React.createElement("label", { key: prayer, className: "flex items-center space-x-3", __source: { fileName: "", lineNumber: 50, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: `notify${prayer}`, checked: settings[`notify${prayer}`], onChange: handleChange, className: "h-4 w-4 text-blue-600 rounded", __source: { fileName: "", lineNumber: 51, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-gray-700", __source: { fileName: "", lineNumber: 58, columnNumber: 21 }, __self: this }, prayer, " Prayer"))))), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 64, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold text-gray-700", __source: { fileName: "", lineNumber: 65, columnNumber: 15 }, __self: this }, "Location Settings"), /*#__PURE__*/ React.createElement("label", { className: "flex items-center space-x-3", __source: { fileName: "", lineNumber: 68, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: "useDeviceLocation", checked: settings.useDeviceLocation, onChange: handleChange, className: "h-4 w-4 text-blue-600 rounded", __source: { fileName: "", lineNumber: 69, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-gray-700", __source: { fileName: "", lineNumber: 76, columnNumber: 17 }, __self: this }, "Use Device Location")), !settings.useDeviceLocation && /*#__PURE__*/ React.createElement("input", { type: "text", name: "location", value: settings.location, onChange: handleChange, placeholder: "Enter your city", className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500", __source: { fileName: "", lineNumber: 80, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end", __source: { fileName: "", lineNumber: 91, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: loading, className: "bg-blue-600 text-white px-6 py-2 rounded-md hover:bg-blue-700 transition-colors disabled:opacity-50", __source: { fileName: "", lineNumber: 92, columnNumber: 15 }, __self: this }, loading ? "Saving..." : "Save Settings")))))); }