responsive page doctor item & page booking
This commit is contained in:
@@ -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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user