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