diff options
Diffstat (limited to 'packages/instant/src/components/ui/flex.tsx')
-rw-r--r-- | packages/instant/src/components/ui/flex.tsx | 39 |
1 files changed, 39 insertions, 0 deletions
diff --git a/packages/instant/src/components/ui/flex.tsx b/packages/instant/src/components/ui/flex.tsx new file mode 100644 index 000000000..fd218b0cd --- /dev/null +++ b/packages/instant/src/components/ui/flex.tsx @@ -0,0 +1,39 @@ +import { MediaChoice, stylesForMedia } from '../../style/media'; +import { ColorOption, styled } from '../../style/theme'; +import { cssRuleIfExists } from '../../style/util'; + +export interface FlexProps { + direction?: 'row' | 'column'; + flexWrap?: 'wrap' | 'nowrap'; + justify?: 'flex-start' | 'center' | 'space-around' | 'space-between' | 'space-evenly' | 'flex-end'; + align?: 'flex-start' | 'center' | 'space-around' | 'space-between' | 'space-evenly' | 'flex-end'; + width?: MediaChoice; + height?: MediaChoice; + backgroundColor?: ColorOption; + inline?: boolean; + flexGrow?: number | string; +} + +export const Flex = + styled.div < + FlexProps > + ` + display: ${props => (props.inline ? 'inline-flex' : 'flex')}; + flex-direction: ${props => props.direction}; + flex-wrap: ${props => props.flexWrap}; + ${props => cssRuleIfExists(props, 'flexGrow')} + justify-content: ${props => props.justify}; + align-items: ${props => props.align}; + background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')}; + ${props => stylesForMedia('width', props.width || 'auto')} + ${props => stylesForMedia('height', props.height || 'auto')} +`; + +Flex.defaultProps = { + direction: 'row', + flexWrap: 'nowrap', + justify: 'center', + align: 'center', +}; + +Flex.displayName = 'Flex'; |