import {
Anchor,
Box,
Center,
Flex,
Group,
Header,
Text,
UnstyledButton,
useMantineTheme,
} from '@mantine/core';
import { useMediaQuery } from '@mantine/hooks';
import { IconAlertTriangle } from '@tabler/icons-react';
import { Trans, useTranslation } from 'next-i18next';
import { Logo } from '../Common/Logo';
import { AvatarMenu } from './AvatarMenu';
import { Search } from './Search';
type MainHeaderProps = {
logoHref?: string;
showExperimental?: boolean;
headerActions?: React.ReactNode;
leftIcon?: React.ReactNode;
};
export const MainHeader = ({
showExperimental = false,
logoHref = '/',
headerActions,
leftIcon,
}: MainHeaderProps) => {
const { breakpoints } = useMantineTheme();
const isSmallerThanMd = useMediaQuery(`(max-width: ${breakpoints.sm})`);
const experimentalHeaderNoteHeight = isSmallerThanMd ? 60 : 30;
const headerBaseHeight = isSmallerThanMd ? 60 + 46 : 60;
const headerHeight = showExperimental
? headerBaseHeight + experimentalHeaderNoteHeight
: headerBaseHeight;
return (
{leftIcon}
{!isSmallerThanMd && }
{headerActions}
{isSmallerThanMd && (
)}
);
};
type ExperimentalHeaderNoteProps = {
height?: 30 | 60;
visible?: boolean;
};
const ExperimentalHeaderNote = ({ visible = false, height = 30 }: ExperimentalHeaderNoteProps) => {
const { t } = useTranslation('layout/header');
if (!visible) return null;
return (
),
dc: (
),
}}
/>
);
};