43 lines
1.4 KiB
JavaScript
43 lines
1.4 KiB
JavaScript
'use client';
|
|
import { Button } from "@mui/material";
|
|
import { useState } from "react"
|
|
|
|
const listLink = [
|
|
{ name: 'درباره پزشک', link: 'about-doctor' },
|
|
{ name: 'موقعیت مکانی ', link: 'location' },
|
|
{ name: 'نظرات', link: 'comments' },
|
|
]
|
|
|
|
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={`
|
|
|
|
`}
|
|
>
|
|
<a href={`#${item.link}`}>
|
|
<Button
|
|
className={`
|
|
!text-[20px] !font-bold !mx-[56px] !py-px
|
|
${idx !== 0 && idx !== listLink.length - 1 ?
|
|
'relative before:absolute before:right-[-56px] before:top-0 before:h-full before:w-px before:bg-[#BABABA] after:absolute after:left-[-56px] after:top-0 after:h-full after:w-px after:bg-[#BABABA]'
|
|
: ''}
|
|
${activeId === idx ? '!text-[#F17732]' : '!text-[#525252]'}
|
|
`}
|
|
variant="text">
|
|
{item.name}
|
|
</Button>
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)
|
|
}
|
|
|
|
export default Link |