mirror of
https://github.com/luxfi/explore.git
synced 2026-09-24 00:28:18 +00:00
tom goriunovandGitHub
ceee8844d0
* limit content width for horizontal menu layout * limit content width for vertical menu layout * limit amout of tabs in routed tabs skeleton * fix width of error screen * add NEXT_PUBLIC_ROLLUP_L2_WITHDRAWAL_URL L2 review envs * add tests * fixes * fix tests * move content wrapper to render fixture * update screenshots and fix tests
35 lines
801 B
TypeScript
35 lines
801 B
TypeScript
import { Flex, chakra } from '@chakra-ui/react';
|
|
import React from 'react';
|
|
|
|
import config from 'configs/app';
|
|
|
|
import { CONTENT_MAX_WIDTH } from '../utils';
|
|
|
|
interface Props {
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
const TOP_BAR_HEIGHT = 36;
|
|
const HORIZONTAL_NAV_BAR_HEIGHT = config.UI.navigation.layout === 'horizontal' ? 49 : 0;
|
|
|
|
const MainArea = ({ children, className }: Props) => {
|
|
return (
|
|
<Flex
|
|
className={ className }
|
|
w="100%"
|
|
maxW={ `${ CONTENT_MAX_WIDTH }px` }
|
|
m="0 auto"
|
|
minH={{
|
|
base: `calc(100vh - ${ TOP_BAR_HEIGHT }px)`,
|
|
lg: `calc(100vh - ${ TOP_BAR_HEIGHT + HORIZONTAL_NAV_BAR_HEIGHT }px)`,
|
|
}}
|
|
alignItems="stretch"
|
|
>
|
|
{ children }
|
|
</Flex>
|
|
);
|
|
};
|
|
|
|
export default React.memo(chakra(MainArea));
|