function LocationSettings({ onSubmit, loading, error }) { const [city, setCity] = useState(""); const [locationError, setLocationError] = useState(""); const handleLocationAccess = ()=>{ if (navigator.geolocation) { navigator.geolocation.getCurrentPosition((position)=>{ onSubmit({ lat: position.coords.latitude, lng: position.coords.longitude }); }, ()=>{ setLocationError("Unable to get location"); }); } else { setLocationError("Geolocation is not supported"); } }; return /*#__PURE__*/ React.createElement("div", { className: "p-4 max-w-md mx-auto", __source: { fileName: "", lineNumber: 24, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: (e)=>{ e.preventDefault(); onSubmit({ city }); }, className: "flex flex-col gap-4", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "city", value: city, onChange: (e)=>setCity(e.target.value), placeholder: "Enter city name", className: "px-4 py-2 border rounded-lg", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: loading, className: "px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, loading ? "Loading..." : "Submit"), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: handleLocationAccess, className: "px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, "Use My Location")), error && /*#__PURE__*/ React.createElement("div", { className: "text-red-500", __source: { fileName: "", lineNumber: 56, columnNumber: 19 }, __self: this }, error), locationError && /*#__PURE__*/ React.createElement("div", { className: "text-red-500", __source: { fileName: "", lineNumber: 57, columnNumber: 27 }, __self: this }, locationError))); } function LocationSettingsStory() { const [loading, setLoading] = useState(false); const [error, setError] = useState(""); const handleSubmit = async (data)=>{ setLoading(true); setError(""); try { await new Promise((resolve)=>setTimeout(resolve, 1000)); console.log("Submitted:", data); } catch (err) { setError("An error occurred"); } finally{ setLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 81, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(LocationSettings, { onSubmit: handleSubmit, loading: loading, error: error, __source: { fileName: "", lineNumber: 82, columnNumber: 7 }, __self: this })); } 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 PrayerTimeCard({ name, time }) { return /*#__PURE__*/ React.createElement("div", { className: "inline-block p-4 rounded-lg shadow-md bg-white", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-roboto font-semibold text-gray-800", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, name), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-gray-600 mt-2", __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }, time)); } function PrayerTimeCardStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-4", __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(PrayerTimeCard, { name: "Fajr", time: "5:30 AM", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(PrayerTimeCard, { name: "Dhuhr", time: "1:15 PM", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(PrayerTimeCard, { name: "Asr", time: "4:45 PM", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this })); } function MainComponent() { const [prayerTimes, setPrayerTimes] = useState(null); const [currentTime, setCurrentTime] = useState(new Date()); const [user, setUser] = useState(null); const [location, setLocation] = useState(null); const [loading, setLoading] = useState(false); useEffect(()=>{ const timer = setInterval(()=>{ setCurrentTime(new Date()); }, 1000); return ()=>clearInterval(timer); }, []); useEffect(()=>{ if (location) { fetchPrayerTimes(); saveUserPrefs(); } }, [ location ]); const fetchPrayerTimes = async ()=>{ setLoading(true); try { const response = await fetch("/api/prayer-times", { method: "POST", body: JSON.stringify(location) }); const data = await response.json(); setPrayerTimes(data); } catch (error) { console.error("Failed to fetch prayer times:", error); } finally{ setLoading(false); } }; const saveUserPrefs = async ()=>{ if (user) { await fetch("/api/save-preferences", { method: "POST", body: JSON.stringify({ location }) }); } }; const getNextPrayer = ()=>{ if (!prayerTimes) return null; const now = currentTime.getTime(); const prayers = [ { name: "Fajr", time: new Date(prayerTimes.fajr).getTime() }, { name: "Dhuhr", time: new Date(prayerTimes.dhuhr).getTime() }, { name: "Asr", time: new Date(prayerTimes.asr).getTime() }, { name: "Maghrib", time: new Date(prayerTimes.maghrib).getTime() }, { name: "Isha", time: new Date(prayerTimes.isha).getTime() } ]; const nextPrayer = prayers.find((prayer)=>prayer.time > now); return nextPrayer || prayers[0]; }; const formatTime = (date)=>{ return date.toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit", hour12: true }); }; const nextPrayer = getNextPrayer(); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-50 font-roboto", __source: { fileName: "", lineNumber: 73, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-sm", __source: { fileName: "", lineNumber: 74, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 py-4", __source: { fileName: "", lineNumber: 75, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-gray-800", __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }, "Prayer Times"), /*#__PURE__*/ React.createElement("a", { href: "/settings", className: "text-blue-600 hover:text-blue-700", __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-cog text-xl", __source: { fileName: "", lineNumber: 79, columnNumber: 15 }, __self: this }))))), /*#__PURE__*/ React.createElement("div", { className: "max-w-2xl mx-auto px-4 py-8", __source: { fileName: "", lineNumber: 85, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(LocationSettings, { onSubmit: setLocation, loading: loading, error: null, __source: { fileName: "", lineNumber: 86, columnNumber: 9 }, __self: this }), !location && /*#__PURE__*/ React.createElement("div", { className: "mt-8 text-center", __source: { fileName: "", lineNumber: 93, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-mosque text-6xl text-gray-400 mb-4", __source: { fileName: "", lineNumber: 94, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold text-gray-600 mb-2", __source: { fileName: "", lineNumber: 95, columnNumber: 13 }, __self: this }, "Welcome to Prayer Times"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-500", __source: { fileName: "", lineNumber: 98, columnNumber: 13 }, __self: this }, "Please set your location to view prayer times")), loading && /*#__PURE__*/ React.createElement("div", { className: "mt-8 text-center", __source: { fileName: "", lineNumber: 105, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin text-4xl text-gray-400", __source: { fileName: "", lineNumber: 106, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "mt-2 text-gray-600", __source: { fileName: "", lineNumber: 107, columnNumber: 13 }, __self: this }, "Loading prayer times...")), location && !loading && /*#__PURE__*/ React.createElement("div", { className: "mt-8 space-y-6", __source: { fileName: "", lineNumber: 112, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-lg p-6", __source: { fileName: "", lineNumber: 113, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 114, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 115, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-3xl font-bold text-gray-800", __source: { fileName: "", lineNumber: 116, columnNumber: 19 }, __self: this }, formatTime(currentTime)), nextPrayer && /*#__PURE__*/ React.createElement("div", { className: "mt-2 text-gray-600", __source: { fileName: "", lineNumber: 120, columnNumber: 21 }, __self: this }, "Next Prayer: ", nextPrayer.name)), /*#__PURE__*/ React.createElement(React.Fragment, null))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 129, columnNumber: 13 }, __self: this }, prayerTimes && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(PrayerTimeCard, { name: "Fajr", time: prayerTimes.fajr, isNext: nextPrayer?.name === "Fajr", __source: { fileName: "", lineNumber: 132, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement(PrayerTimeCard, { name: "Dhuhr", time: prayerTimes.dhuhr, isNext: nextPrayer?.name === "Dhuhr", __source: { fileName: "", lineNumber: 137, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement(PrayerTimeCard, { name: "Asr", time: prayerTimes.asr, isNext: nextPrayer?.name === "Asr", __source: { fileName: "", lineNumber: 142, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement(PrayerTimeCard, { name: "Maghrib", time: prayerTimes.maghrib, isNext: nextPrayer?.name === "Maghrib", __source: { fileName: "", lineNumber: 147, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement(PrayerTimeCard, { name: "Isha", time: prayerTimes.isha, isNext: nextPrayer?.name === "Isha", __source: { fileName: "", lineNumber: 152, columnNumber: 19 }, __self: this }))), user && /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-lg p-6", __source: { fileName: "", lineNumber: 162, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-4", __source: { fileName: "", lineNumber: 163, columnNumber: 17 }, __self: this }, "Welcome back, ", user.name, "!"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 166, columnNumber: 17 }, __self: this }, "Your saved location: ", location.city || "Using GPS"))))); }