2019-12-07 00:09:01 +07:00
|
|
|
import React from 'react';
|
|
|
|
import styled from '@emotion/styled';
|
|
|
|
import LockOutlined from '@material-ui/icons/LockOutlined';
|
|
|
|
import CloseIcon from '@material-ui/icons/Close';
|
2020-03-08 22:45:07 +07:00
|
|
|
import { useTranslation } from 'react-i18next';
|
2019-12-07 00:09:01 +07:00
|
|
|
|
|
|
|
import Heading from '../../muiComponents/Heading';
|
|
|
|
import Avatar from '../../muiComponents/Avatar';
|
|
|
|
import Box from '../../muiComponents/Box';
|
|
|
|
import IconButton from '../../muiComponents/IconButton';
|
|
|
|
import { Theme } from '../../design-tokens/theme';
|
|
|
|
|
|
|
|
const StyledAvatar = styled(Avatar)<{ theme?: Theme }>(({ theme }) => ({
|
|
|
|
margin: theme.spacing(1),
|
|
|
|
backgroundColor: theme.palette.primary.main,
|
2020-03-31 13:44:59 +07:00
|
|
|
color: theme.palette.white,
|
2019-12-07 00:09:01 +07:00
|
|
|
}));
|
|
|
|
|
|
|
|
const StyledIconButton = styled(IconButton)<{ theme?: Theme }>(({ theme }) => ({
|
|
|
|
position: 'absolute',
|
|
|
|
right: theme.spacing() / 2,
|
|
|
|
top: theme.spacing() / 2,
|
|
|
|
color: theme.palette.grey[500],
|
|
|
|
}));
|
|
|
|
|
|
|
|
interface Props {
|
|
|
|
onClose?: () => void;
|
|
|
|
}
|
|
|
|
|
|
|
|
const LoginDialogHeader: React.FC<Props> = ({ onClose }) => {
|
2020-03-08 22:45:07 +07:00
|
|
|
const { t } = useTranslation();
|
|
|
|
|
2019-12-07 00:09:01 +07:00
|
|
|
return (
|
|
|
|
<Box alignItems="center" display="flex" flexDirection="column" position="relative">
|
|
|
|
{onClose && (
|
2020-03-08 22:45:07 +07:00
|
|
|
<StyledIconButton aria-label={t('button.close')} onClick={onClose}>
|
2019-12-07 00:09:01 +07:00
|
|
|
<CloseIcon />
|
|
|
|
</StyledIconButton>
|
|
|
|
)}
|
|
|
|
<StyledAvatar>
|
|
|
|
<LockOutlined />
|
|
|
|
</StyledAvatar>
|
2020-03-08 22:45:07 +07:00
|
|
|
<Heading>{t('button.login')}</Heading>
|
2019-12-07 00:09:01 +07:00
|
|
|
</Box>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default LoginDialogHeader;
|