Files
twenty/front/src/modules/ui/layout/containers/WithTopBarContainer.tsx
Charles Bochet 49462c69a2 Refactor Layout (#322)
* Refactor Layout

* Fix storybook

* Fixing tests by forcing msw version before regression
2023-06-17 21:24:15 +02:00

36 lines
754 B
TypeScript

import { ReactNode } from 'react';
import styled from '@emotion/styled';
import { TOP_BAR_MIN_HEIGHT, TopBar } from '../top-bar/TopBar';
import { ContentContainer } from './ContentContainer';
type OwnProps = {
children: JSX.Element;
title: string;
icon: ReactNode;
onAddButtonClick?: () => void;
};
const StyledContainer = styled.div`
display: flex;
flex-direction: column;
width: 100%;
`;
export function WithTopBarContainer({
children,
title,
icon,
onAddButtonClick,
}: OwnProps) {
return (
<StyledContainer>
<TopBar title={title} icon={icon} onAddButtonClick={onAddButtonClick} />
<ContentContainer topMargin={TOP_BAR_MIN_HEIGHT}>
{children}
</ContentContainer>
</StyledContainer>
);
}