60 lines
1.2 KiB
JavaScript
60 lines
1.2 KiB
JavaScript
import { getUser } from '@/api/user/query';
|
|
import { STALE_TIME } from '@/constants/request';
|
|
import { min } from '@/styles/mq';
|
|
import { useQuery } from '@tanstack/react-query';
|
|
import styled from 'styled-components';
|
|
import { Flex } from 'ui';
|
|
|
|
const UserText = styled.span`
|
|
margin: 0;
|
|
padding: 0;
|
|
text-transform: uppercase;
|
|
color: #fff;
|
|
font-size: 0.5rem;
|
|
font-family: 'Montserrat';
|
|
font-weight: 500;
|
|
|
|
${min('laptop')} {
|
|
font-size: 0.75rem;
|
|
}
|
|
`;
|
|
|
|
function User() {
|
|
const { data: user } = useQuery(['user'], ({ signal }) => getUser({ signal }), {
|
|
staleTime: STALE_TIME,
|
|
});
|
|
|
|
return <UserText>{user?.displayName}</UserText>;
|
|
}
|
|
|
|
const Logout = styled.a`
|
|
margin: 0;
|
|
padding: 0;
|
|
text-transform: uppercase;
|
|
color: #fff;
|
|
font-size: 0.45rem;
|
|
font-family: 'Montserrat';
|
|
font-weight: 500;
|
|
|
|
${min('laptop')} {
|
|
font-size: 0.55rem;
|
|
}
|
|
`;
|
|
|
|
function Auth() {
|
|
return (
|
|
<Flex
|
|
flexDirection="column"
|
|
alignItems="flex-end"
|
|
alignSelf={['flex-start']}
|
|
justifyContent="space-between"
|
|
height="100%"
|
|
>
|
|
<User />
|
|
<Logout href="/logout">Выход</Logout>
|
|
</Flex>
|
|
);
|
|
}
|
|
|
|
export default Auth;
|