Abdullah.
d246b16063
This PR brings in a few more components and some refactor of the existing components for the website due to design requirements.
38 lines
1004 B
TypeScript
38 lines
1004 B
TypeScript
import { Container } from '@/design-system/components';
|
|
import { theme } from '@/theme';
|
|
import { styled } from '@linaria/react';
|
|
import type { ReactNode } from 'react';
|
|
|
|
const StyledSection = styled.section`
|
|
min-width: 0;
|
|
width: 100%;
|
|
`;
|
|
|
|
const StyledContainer = styled(Container)`
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr);
|
|
justify-items: center;
|
|
min-width: 0;
|
|
text-align: center;
|
|
padding-top: ${theme.spacing(7.5)};
|
|
padding-left: ${theme.spacing(4)};
|
|
padding-right: ${theme.spacing(4)};
|
|
row-gap: ${theme.spacing(6)};
|
|
|
|
@media (min-width: ${theme.breakpoints.md}px) {
|
|
padding-top: ${theme.spacing(12)};
|
|
padding-left: ${theme.spacing(10)};
|
|
padding-right: ${theme.spacing(10)};
|
|
}
|
|
`;
|
|
|
|
type RootProps = { backgroundColor: string; children: ReactNode };
|
|
|
|
export function Root({ backgroundColor, children }: RootProps) {
|
|
return (
|
|
<StyledSection style={{ backgroundColor }}>
|
|
<StyledContainer>{children}</StyledContainer>
|
|
</StyledSection>
|
|
);
|
|
}
|