45 lines
1.0 KiB
TypeScript
45 lines
1.0 KiB
TypeScript
import type { Theme } from './utils';
|
|
import { getStyles } from './utils';
|
|
import type { PropsWithChildren } from 'react';
|
|
import styled from 'styled-components';
|
|
|
|
export type { BoxProps, FlexProps } from 'rebass/styled-components';
|
|
export { Box, Flex } from 'rebass/styled-components';
|
|
|
|
type WithArrayType<T> = {
|
|
[K in keyof T]: Array<T[K]> | T[K];
|
|
};
|
|
|
|
type GridSelectedProps = Pick<
|
|
HTMLDivElement['style'],
|
|
| 'alignItems'
|
|
| 'columnGap'
|
|
| 'gap'
|
|
| 'grid'
|
|
| 'gridArea'
|
|
| 'gridAutoColumns'
|
|
| 'gridAutoFlow'
|
|
| 'gridAutoRows'
|
|
| 'gridColumn'
|
|
| 'gridColumnEnd'
|
|
| 'gridColumnStart'
|
|
| 'gridRow'
|
|
| 'gridRowEnd'
|
|
| 'gridRowStart'
|
|
| 'gridTemplate'
|
|
| 'gridTemplateAreas'
|
|
| 'gridTemplateColumns'
|
|
| 'gridTemplateRows'
|
|
| 'justifyContent'
|
|
| 'justifyItems'
|
|
| 'placeContent'
|
|
| 'placeItems'
|
|
| 'rowGap'
|
|
>;
|
|
export type GridProps = Partial<WithArrayType<GridSelectedProps>> & PropsWithChildren;
|
|
|
|
export const Grid = styled.div<GridProps>`
|
|
display: grid;
|
|
${({ theme, ...props }: GridProps & { theme: Theme }) => getStyles(props, theme)}
|
|
`;
|