mirror of
https://github.com/luxfi/explore.git
synced 2026-09-24 00:28:18 +00:00
tom goriunovandGitHub
703ffcd395
* 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
28 lines
757 B
TypeScript
28 lines
757 B
TypeScript
import { Flex, chakra } from '@chakra-ui/react';
|
|
import React from 'react';
|
|
|
|
import config from 'configs/app';
|
|
|
|
interface Props {
|
|
className?: string;
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
const MainColumn = ({ children, className }: Props) => {
|
|
return (
|
|
<Flex
|
|
className={ className }
|
|
flexDir="column"
|
|
flexGrow={ 1 }
|
|
w={{ base: '100%', lg: config.UI.navigation.layout === 'horizontal' ? '100%' : 'auto' }}
|
|
paddingX={{ base: 3, lg: config.UI.navigation.layout === 'horizontal' ? 6 : 12 }}
|
|
paddingTop={{ base: `${ 12 + 52 }px`, lg: 6 }} // 12px is top padding of content area, 52px is search bar height
|
|
paddingBottom={ 8 }
|
|
>
|
|
{ children }
|
|
</Flex>
|
|
);
|
|
};
|
|
|
|
export default React.memo(chakra(MainColumn));
|