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

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",
},
],
};