31 lines
1.1 KiB
JavaScript
31 lines
1.1 KiB
JavaScript
import { Button } from "@mui/material";
|
|
|
|
function Hours({ doctor, hour, setHour, value, nameHours }) {
|
|
return (
|
|
<ul
|
|
className="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-x-[16px] gap-y-[24px] mt-[24px] mb-[40px]"
|
|
>
|
|
{doctor[nameHours[value]].map((item, idx) => (
|
|
<li
|
|
key={idx}
|
|
>
|
|
<Button
|
|
onClick={() => setHour(idx)}
|
|
className={`
|
|
!w-full !rounded-[8px] !grid !place-items-center !bg-[#EFEFEF] !py-[10px] !px-[14px] !h-[40px] md:!h-[42px] lg:!h-[44px]
|
|
${idx === hour ? '!bg-[#F79463] ' : ''}
|
|
`}
|
|
>
|
|
<p className={`
|
|
text-[16px] font-semibold
|
|
${item.active ? 'text-[#525252]' : 'text-[#D7D7D7]'}
|
|
${idx === hour ? '!text-[#FAFAFA] ' : ''}
|
|
`}>{item.hour}</p>
|
|
</Button>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)
|
|
}
|
|
|
|
export default Hours; |