|
|
|
import React from 'react'
|
|
|
|
|
|
|
|
// const time = {
|
|
|
|
// morningTime: "صبح",
|
|
|
|
// sunriseTime: "طلوع",
|
|
|
|
// noonTime: "ظهر",
|
|
|
|
// sunsetTime: "غروب",
|
|
|
|
// maghribTime: "مغرب",
|
|
|
|
// midnightTime: "نیمه شب",
|
|
|
|
// }
|
|
|
|
|
|
|
|
const ReligiousTimes = ({hours}) => {
|
|
|
|
return (
|
|
|
|
<div className="flex flex-row items-center justify-center bg-white shadow-sm rounded-lg max-w-[440px] w-1/3 py-3.5 px-0.5 mr-10">
|
|
|
|
{hours.map((hour,index) => (
|
|
|
|
<div className="flex flex-row items-center" key={index}>
|
|
|
|
<span className="text-xs text-[#0F0543] font-bold">
|
|
|
|
{hour.partOfDay}
|
|
|
|
</span>
|
|
|
|
<span className="text-xs text-[#2483E1] font-bold mr-1">
|
|
|
|
{hour.time}
|
|
|
|
</span>
|
|
|
|
{Number(index) !== hours.length -1 && (
|
|
|
|
<div className="w-0.5 bg-[#9DACD344] mx-2" style={{height: "20px"}}></div>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
))}
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export default ReligiousTimes
|
|
|
|
|
|
|
|
ReligiousTimes.defaultProps = {
|
|
|
|
|
|
|
|
hours : [
|
|
|
|
{
|
|
|
|
partOfDay: "صبح",
|
|
|
|
time: "5:03",
|
|
|
|
},
|
|
|
|
{
|
|
|
|
partOfDay: "طلوع",
|
|
|
|
time: "6:27",
|
|
|
|
},
|
|
|
|
{
|
|
|
|
partOfDay: "ظهر",
|
|
|
|
time: "12:15",
|
|
|
|
},
|
|
|
|
{
|
|
|
|
partOfDay: "غروب",
|
|
|
|
time: "18:05",
|
|
|
|
},
|
|
|
|
{
|
|
|
|
partOfDay: "مغرب",
|
|
|
|
time: "18:23",
|
|
|
|
},
|
|
|
|
{
|
|
|
|
partOfDay: "نیمه شب",
|
|
|
|
time: "23:34",
|
|
|
|
},
|
|
|
|
]
|
|
|
|
}
|