49 lines
1.6 KiB
JavaScript
49 lines
1.6 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 (
|
|
<>
|
|
<span className="block bg-[#EFEFEF] h-px w-full my-[16px] lg:my-0 lg:bg-transparent"></span>
|
|
<ul className="flex lg:mt-[56px] 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-[16px] md:!text-[18px] lg:!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 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>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default Link;
|