51 lines
1.7 KiB
JavaScript
51 lines
1.7 KiB
JavaScript
import FuseSvgIcon from '@fuse/core/FuseSvgIcon/FuseSvgIcon';
|
|
import { memo } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { Link } from 'react-router-dom';
|
|
import linksConfigLayout2 from './linksLayout2Config';
|
|
|
|
function HeaderLayout2(props) {
|
|
const { t } = useTranslation('layout2');
|
|
|
|
return (
|
|
<header className="fixed z-50 flex items-center justify-center w-full h-72 px-10 bg-white">
|
|
<div className="flex justify-between max-w-screen-xl w-full">
|
|
<Link to="/">
|
|
<img
|
|
className="max-w-[88px] max-h-[45px]"
|
|
src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Instagram_icon.png/600px-Instagram_icon.png"
|
|
alt={t('logo_alt')}
|
|
/>
|
|
</Link>
|
|
<nav className="flex grow justify-center gap-72 items-center">
|
|
{linksConfigLayout2.map((path) => (
|
|
<Link
|
|
className="text-lg leading-5 text-slate-800 no-underline"
|
|
to={`/${path}`}
|
|
key={path}
|
|
>
|
|
{t(path)}
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
{props.isAuthenticated || (
|
|
<div className="flex gap-32 items-center">
|
|
<Link className="text-indigo-400" to="/sign-in">
|
|
{t('sign_in')}
|
|
</Link>
|
|
<Link
|
|
className="flex gap-7 items-center px-24 py-10 text-lg leading-5 text-white bg-indigo-400 rounded-2xl"
|
|
to="/sign-up"
|
|
>
|
|
<span>{t('sign_up')}</span>
|
|
<FuseSvgIcon>heroicons-outline:login</FuseSvgIcon>
|
|
</Link>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|
|
|
|
export default memo(HeaderLayout2);
|