73 lines
1.9 KiB
TypeScript
73 lines
1.9 KiB
TypeScript
'use client';
|
|
|
|
import React, { FC, useState, useEffect } from 'react';
|
|
import { Button } from 'antd';
|
|
import { styled } from 'styled-components';
|
|
import { AuthModal } from '../../Modals/AuthModal';
|
|
|
|
type HeaderAuthLinksProps = {
|
|
enterTitle: string;
|
|
registerTitle: string;
|
|
separatorClass?: string;
|
|
};
|
|
|
|
const LinkButton = styled(Button)`
|
|
color: #66A5AD !important;
|
|
font-size: 16px !important;
|
|
height: auto !important;
|
|
padding: 0 !important;
|
|
font-style: normal !important;
|
|
font-weight: 600 !important;
|
|
line-height: normal !important;
|
|
`;
|
|
|
|
export const HeaderAuthLinks: FC<HeaderAuthLinksProps> = ({
|
|
enterTitle,
|
|
registerTitle,
|
|
separatorClass = 'b-header__nav__list__line'
|
|
}) => {
|
|
const [isOpenModal, setIsOpenModal] = useState<boolean>(false);
|
|
const [mode, setMode] = useState<'enter' | 'register' | 'reset' | 'finish'>('enter');
|
|
|
|
useEffect(() => {
|
|
if (!isOpenModal) {
|
|
setMode('enter');
|
|
}
|
|
}, [isOpenModal]);
|
|
|
|
const onOpen = (mode: 'enter' | 'register' | 'reset' | 'finish') => {
|
|
setMode(mode);
|
|
setIsOpenModal(true);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<li>
|
|
<LinkButton
|
|
type="link"
|
|
onClick={() => onOpen('register')}
|
|
>
|
|
{registerTitle}
|
|
</LinkButton>
|
|
</li>
|
|
<li>
|
|
<span className={separatorClass}>|</span>
|
|
</li>
|
|
<li>
|
|
<LinkButton
|
|
type="link"
|
|
onClick={() => onOpen('enter')}
|
|
>
|
|
{enterTitle}
|
|
</LinkButton>
|
|
</li>
|
|
<AuthModal
|
|
open={isOpenModal}
|
|
handleCancel={() => setIsOpenModal(false)}
|
|
mode={mode}
|
|
updateMode={setMode}
|
|
/>
|
|
</>
|
|
);
|
|
};
|