You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
52 lines
1.1 KiB
52 lines
1.1 KiB
import React from "react"; |
|
|
|
const ReligiousTimes = ({ hours }) => { |
|
return ( |
|
<div className="w-[550px] flex flex-row items-center justify-around bg-white shadow-sm rounded-lg py-3.5 px-0.5 mt-10 mr-10"> |
|
{hours.map((hour, index) => ( |
|
<div className="flex flex-row items-center" key={index}> |
|
<span className="text-xs text-[#0F0543] font-sansbold"> |
|
{hour.partOfDay} |
|
</span> |
|
<span className="text-xs text-[#2483E1] font-sansbold mr-1"> |
|
{hour.time} |
|
</span> |
|
{Number(index) !== hours.length - 1 && ( |
|
<div className="h-[20px] w-0.5 bg-[#9DACD344] mx-2"></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: "18:23", |
|
}, |
|
], |
|
};
|
|
|