28 lines
775 B
TypeScript
28 lines
775 B
TypeScript
|
import { Avatar, Text, Container, Flex, UnstyledButton } from "@mantine/core";
|
||
|
|
import React from "react";
|
||
|
|
import { useUserContext } from "./UserContext";
|
||
|
|
import { Outlet, useNavigate } from "react-router";
|
||
|
|
|
||
|
|
export const Header: React.FC = () => {
|
||
|
|
const { username, telegram_photo_url } = useUserContext();
|
||
|
|
const navigate = useNavigate();
|
||
|
|
|
||
|
|
const handleClick = React.useCallback(() => {
|
||
|
|
navigate("/profile");
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Container p="sm">
|
||
|
|
<Flex justify="flex-end">
|
||
|
|
<UnstyledButton onClick={handleClick}>
|
||
|
|
<Flex align="center" gap="sm">
|
||
|
|
<Text c="blue">{username}</Text>
|
||
|
|
<Avatar src={telegram_photo_url} />
|
||
|
|
</Flex>
|
||
|
|
</UnstyledButton>
|
||
|
|
</Flex>
|
||
|
|
<Outlet />
|
||
|
|
</Container>
|
||
|
|
);
|
||
|
|
};
|