aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant/src/components/ui/flex.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'packages/instant/src/components/ui/flex.tsx')
-rw-r--r--packages/instant/src/components/ui/flex.tsx34
1 files changed, 34 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..544d9fe23
--- /dev/null
+++ b/packages/instant/src/components/ui/flex.tsx
@@ -0,0 +1,34 @@
+import * as React from 'react';
+
+import { ColorOption, styled } from '../../style/theme';
+
+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';
+ backgroundColor?: ColorOption;
+ className?: string;
+}
+
+const PlainFlex: React.StatelessComponent<FlexProps> = ({ children, className }) => (
+ <div className={className}>{children}</div>
+);
+
+export const Flex = styled(PlainFlex)`
+ display: flex;
+ direction: ${props => props.direction};
+ flex-wrap: ${props => props.flexWrap};
+ justify-content: ${props => props.justify};
+ align-items: ${props => props.align};
+ background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')};
+`;
+
+Flex.defaultProps = {
+ direction: 'row',
+ flexWrap: 'nowrap',
+ justify: 'center',
+ align: 'center',
+};
+
+Flex.displayName = 'Flex';