66 lines
2.3 KiB
JavaScript
66 lines
2.3 KiB
JavaScript
'use client';
|
|
|
|
import { Button } from "@mui/material";
|
|
import Logo from "@/app/component/Logo";
|
|
import Link from "next/link";
|
|
import Row from "./list/Row";
|
|
import Col from "./list/col";
|
|
import ButtonMenu from "./list/col/ButtonMenu";
|
|
import { useState } from "react";
|
|
import BgGray from "./list/col/BgGray";
|
|
import UserLogin from "@/components/icons/UserLogin";
|
|
|
|
function Header({ name }) {
|
|
|
|
const [isActive, setIsActive] = useState(false);
|
|
|
|
return (
|
|
<div
|
|
className="bg-[#FAFAFA] rounded-lg shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] w-full mx-auto"
|
|
>
|
|
<div className="h-20 px-4 py-8 flex overflow-hidden justify-between items-center flex-nowrap">
|
|
<div className="">
|
|
<BgGray
|
|
isActive={isActive}
|
|
setIsActive={setIsActive}
|
|
/>
|
|
<Col
|
|
isActive={isActive}
|
|
setIsActive={setIsActive}
|
|
/>
|
|
<div className="relative flex flex-row-reverse gap-2">
|
|
<Logo />
|
|
<div className="flex lg:hidden">
|
|
<ButtonMenu
|
|
isActive={isActive}
|
|
setIsActive={setIsActive}
|
|
/>
|
|
<Logo isAbsolute={true} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Row />
|
|
<Link href='/signin'>
|
|
<Button
|
|
className="!hidden lg:!flex"
|
|
variant="outlined"
|
|
color="primary"
|
|
>
|
|
ورود | ثبت نام
|
|
</Button>
|
|
<Button
|
|
className={`!flex lg:!hidden !p-2 !rounded-full transition-all duration-500 ${isActive ? '!bg-[#9D9D9D]' : '!bg-[#EFEFEF]'}`}
|
|
variant="text"
|
|
color="primary"
|
|
>
|
|
<div className="flex lg:hidden">
|
|
<UserLogin />
|
|
</div>
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Header |