60 lines
1.1 KiB
TypeScript
60 lines
1.1 KiB
TypeScript
import React, { FC, ReactNode } from "react";
|
|
import styled, { css } from "styled-components";
|
|
import CSS from "csstype";
|
|
|
|
import { color } from "../../shared/styles";
|
|
|
|
interface CenteredContainerProps {
|
|
children: ReactNode | null;
|
|
style?: CSS.Properties;
|
|
fullscreen?: boolean;
|
|
wide?: boolean;
|
|
}
|
|
|
|
const CenteredContainer: FC<CenteredContainerProps> = ({
|
|
children,
|
|
style,
|
|
fullscreen = false,
|
|
wide = false,
|
|
}) => {
|
|
return (
|
|
<StyledDiv style={style} fullscreen={fullscreen} wide={wide}>
|
|
{children}
|
|
</StyledDiv>
|
|
);
|
|
};
|
|
|
|
export default CenteredContainer;
|
|
|
|
const StyledDiv = styled.div<CenteredContainerProps>`
|
|
height: 100vh;
|
|
text-align: center;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
${(props) =>
|
|
props.fullscreen &&
|
|
css`
|
|
width: 100vw;
|
|
background: linear-gradient(180deg, #060b2e 0%, #051745 100%);
|
|
`}
|
|
|
|
${(props) =>
|
|
!props.fullscreen &&
|
|
css`
|
|
max-width: 600px;
|
|
width: 100%;
|
|
padding: 0 30px;
|
|
`}
|
|
|
|
${(props) =>
|
|
!props.fullscreen &&
|
|
props.wide &&
|
|
css`
|
|
max-width: 1200px;
|
|
`}
|
|
`;
|