responsive page doctor item & page booking

This commit is contained in:
Ehsan
2024-08-29 03:18:01 +03:30
parent 6384dd10b6
commit 707206450c
10 changed files with 96 additions and 52 deletions
+29 -22
View File
@@ -13,30 +13,37 @@ function Link() {
const [activeId, setActiveId] = useState(0);
return (
<ul className="flex items-center justify-start mt-[56px] mb-[32px]">
{listLink.map((item, idx) => (
<li
key={idx}
className="flex"
>
<a href={`#${item.link}`}>
<Button
onClick={() => setActiveId(idx)}
className={`!text-[20px] !font-bold !p-1
<>
<span className="block bg-[#EFEFEF] h-px w-full my-[16px] lg:my-0 lg:bg-transparent"></span>
<ul className="flex items-center justify-evenly lg:justify-start mb-[32px]">
{listLink.map((item, idx) => (
<li
key={idx}
className="flex w-full lg:w-fit relative"
>
<a
href={`#${item.link}`}
className="mx-auto"
>
<Button
onClick={() => setActiveId(idx)}
className={`!text-[20px] !text-center !font-bold !p-1
${activeId === idx ? '!text-[#F17732]' : '!text-[#525252]'}
`}
variant="text">
{item.name}
</Button>
</a>
{listLink.length > idx + 1 && (
<span
className="block bg-[#BABABA] w-px h-[38px] lg:mx-[44px] xl:mx-[56px]"
></span>
)}
</li>
))}
</ul>
variant="text">
{item.name}
</Button>
</a>
{listLink.length > idx + 1 && (
<span
className="block border-transparent border-l border-dotted border-l-[#BABABA] w-px h-[38px] lg:mx-[44px] xl:mx-[56px]
absolute left-0 lg:relative"
></span>
)}
</li>
))}
</ul>
</>
)
}