46 lines
1.4 KiB
TypeScript
46 lines
1.4 KiB
TypeScript
import { Link } from 'react-router-dom';
|
||
import { Logo } from '../icons/Logo';
|
||
import { Button } from '../ui/Button';
|
||
import { ClassNameWrapper } from '../../hocs/ClassNameWrapper';
|
||
import { useModalStore } from '../../stores/modalStore';
|
||
import { ModalWithForm } from './ModalWithForm';
|
||
|
||
export function Header() {
|
||
const { setModal } = useModalStore();
|
||
|
||
return (
|
||
<header className="lg:px-6 flex items-center h-16 border-b border-[#3D425C] bg-[#14161F]">
|
||
<Link to={'/'}>
|
||
<ClassNameWrapper element={<Logo />} className="h-10" />
|
||
</Link>
|
||
<nav className="mx-auto self-stretch flex">
|
||
{[
|
||
{ path: '/#products', text: 'Продукты' },
|
||
{ path: '/#devices', text: 'Оборудование' },
|
||
{ path: '/#projects', text: 'Проекты' },
|
||
{ path: '/#contacts', text: 'Контакты' },
|
||
].map(link => (
|
||
<HashLink key={link.path} {...link} />
|
||
))}
|
||
</nav>
|
||
<Button
|
||
className="-mr-6 rounded-none h-full px-10"
|
||
onClick={() => setModal(<ModalWithForm />)}
|
||
>
|
||
Отправить заявку
|
||
</Button>
|
||
</header>
|
||
);
|
||
}
|
||
|
||
function HashLink({ path, text }: { path: string; text: string }) {
|
||
return (
|
||
<Link
|
||
className="border-l last:border-r border-[#3D425C] px-10 self-stretch text-[#9299BD] content-center hover:bg-[#3D425C]"
|
||
to={path}
|
||
>
|
||
{text}
|
||
</Link>
|
||
);
|
||
}
|