هل يمكنكم شرح لي هذه الكود بشكل افضل,
import Prayer from "./components"
import React,{useEffect, useState} from "react"
function App() {
const [prayerTimes , setPrayerTimes] = useState({})
const [dateTime , setDateTime] = useState("")
const [citi , setCiti] = useState("Cairo")
const citys = [
{name :"القاهرة" , value:"Cairo"},
{name :"الأسكندرية" , value:"Alexandria"},
{name : "الجيزة" , value: "Giza"},
{name :"المنصورة" , value:"Monsoura"},
{name :"الأسوان" , value:"Aswan"},
{name :"الأقصر" , value:"Luxor"},
]
useEffect(() => {
const fetchPrayerTime = async () => {
try{
const response = await fetch(`https://api.aladhan.com/v1/timingsByCity/24-05-2025?city=Eg&country=${citi}`);
const data_Prayar = await response.json()
setPrayerTimes(data_Prayar.data.timings)
setDateTime(data_Prayar.data.date.gregorian.date)
console.log(data_Prayar.data.date.gregorian.date);
}catch(error){
console.log(error)
}
}
fetchPrayerTime()
},[citi])
const formateTimes = (time) =>{
if(!time){
return "00:00";
}
let [hours , minutes] = time.split(":").map(Number)
const perd = hours >= 12 ? "PM" : "AM";
hours = hours % 12 || 12;
return`${hours}:${minutes < 10 ? "0" + minutes : minutes} ${perd}`
}
return (
<>
<section>
<div className="container">
<div className="top-section">
<div className="city">
<h3>المدينة</h3>
<select name="" id="" onChange={(e) => setCiti(e.target.value)}>
{citys.map((city) => (
<option key={city.value} value={city.value}>{city.name}</option>
))}
</select>
</div>
<div className="date">
<h3>التاريخ</h3>
<h4>{dateTime}</h4>
</div>
</div>
<Prayer name="الفجر" time={formateTimes(prayerTimes.Fajr)}/>
<Prayer name="الظهر" time={formateTimes(prayerTimes.Dhuhr)}/>
<Prayer name="العصر" time={formateTimes(prayerTimes.Asr)}/>
<Prayer name="المغرب" time={formateTimes(prayerTimes.Maghrib)}/>
<Prayer name="العشاء" time={formateTimes(prayerTimes.Isha)}/>
</div>
</section>
</>
)
}
export default App
اعتذر ان كان الامر مزعج بالنسبة لكم