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.
56 lines
1.2 KiB
56 lines
1.2 KiB
3 years ago
|
import React from "react";
|
||
3 years ago
|
|
||
3 years ago
|
const ReligiousTimes = ({ hours }) => {
|
||
3 years ago
|
return (
|
||
3 years ago
|
<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">
|
||
3 years ago
|
{hours.map((hour, index) => (
|
||
|
<div className="flex flex-row items-center" key={index}>
|
||
3 years ago
|
<span className="text-xs text-[#0F0543] font-sansbold">
|
||
3 years ago
|
{hour.partOfDay}
|
||
|
</span>
|
||
3 years ago
|
<span className="text-xs text-[#2483E1] font-sansbold mr-1">
|
||
3 years ago
|
{hour.time}
|
||
|
</span>
|
||
|
{Number(index) !== hours.length - 1 && (
|
||
|
<div
|
||
|
className="w-0.5 bg-[#9DACD344] mx-2"
|
||
|
style={{ height: "20px" }}
|
||
|
></div>
|
||
|
)}
|
||
|
</div>
|
||
|
))}
|
||
3 years ago
|
</div>
|
||
3 years ago
|
);
|
||
|
};
|
||
3 years ago
|
|
||
3 years ago
|
export default ReligiousTimes;
|
||
3 years ago
|
|
||
|
ReligiousTimes.defaultProps = {
|
||
3 years ago
|
hours: [
|
||
|
{
|
||
|
partOfDay: "صبح",
|
||
|
time: "5:03",
|
||
|
},
|
||
|
{
|
||
|
partOfDay: "طلوع",
|
||
|
time: "6:27",
|
||
|
},
|
||
|
{
|
||
|
partOfDay: "ظهر",
|
||
|
time: "12:15",
|
||
|
},
|
||
|
{
|
||
|
partOfDay: "غروب",
|
||
|
time: "18:05",
|
||
|
},
|
||
|
{
|
||
|
partOfDay: "مغرب",
|
||
|
time: "18:23",
|
||
|
},
|
||
|
{
|
||
|
partOfDay: "نیمه شب",
|
||
3 years ago
|
time: "18:23",
|
||
3 years ago
|
},
|
||
|
],
|
||
|
};
|