33 lines
937 B
TypeScript
33 lines
937 B
TypeScript
import { Title, AppShell, Flex } from "@mantine/core";
|
|
import { useLingui } from "@lingui/react";
|
|
import { HeaderConfig } from "../types/header-config";
|
|
import BackButton from "./back-button";
|
|
|
|
const Header = ({ collapsed, title, titleValues, withBackButton }: HeaderConfig) => {
|
|
const { i18n } = useLingui();
|
|
const resolvedTitle =
|
|
typeof title === "string" || title === undefined
|
|
? title
|
|
: i18n._({ ...title, values: titleValues });
|
|
|
|
return (
|
|
<AppShell.Header
|
|
id='app-header'
|
|
display={collapsed ? 'none' : 'flex'}
|
|
style={{
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
}}
|
|
>
|
|
{ withBackButton && <BackButton /> }
|
|
<Flex justify='center' px='md' mt={8}>
|
|
<Title order={1} lts='0.08em' style={{ userSelect: 'none' }}>
|
|
{resolvedTitle?.toLocaleUpperCase()}
|
|
</Title>
|
|
</Flex>
|
|
</AppShell.Header>
|
|
);
|
|
}
|
|
|
|
export default Header;
|