Closes #21

joaopalmeiro · Jan 28, 2022 · c1ed505 · c1ed505
1 parent 3ef37b8
commit c1ed505
Show file tree

Hide file tree

Showing 2 changed files with 113 additions and 2 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -2,6 +2,7 @@ import { styled } from '../stitches.config';
 
 import Button from './Button';
 import Container from './Container';
+import Flex from './Flex';
 import NepalMap from './NepalMap';
 
 // Source: https://ped.ro/
@@ -24,8 +25,10 @@ function App() {
     return (
         <>
             <Container size={2}>
-                <NepalMap />
-                <Button size={3}>Add</Button>
+                <Flex direction="column" gap={1} align="center">
+                    <NepalMap />
+                    <Button size={3}>Add</Button>
+                </Flex>
             </Container>
             <Background>
                 <filter id="noise">

diff --git a/src/Flex.jsx b/src/Flex.jsx
@@ -0,0 +1,108 @@
+/* eslint-disable sort-keys */
+import { styled } from '../stitches.config';
+
+// Source: https://github.com/radix-ui/design-system/blob/v0.6.2/components/Flex.tsx
+const Flex = styled('div', {
+    // Reset
+    boxSizing: 'border-box',
+
+    // Custom
+    display: 'flex',
+
+    variants: {
+        direction: {
+            row: {
+                flexDirection: 'row'
+            },
+            column: {
+                flexDirection: 'column'
+            },
+            rowReverse: {
+                flexDirection: 'row-reverse'
+            },
+            columnReverse: {
+                flexDirection: 'column-reverse'
+            }
+        },
+        align: {
+            start: {
+                alignItems: 'flex-start'
+            },
+            center: {
+                alignItems: 'center'
+            },
+            end: {
+                alignItems: 'flex-end'
+            },
+            stretch: {
+                alignItems: 'stretch'
+            },
+            baseline: {
+                alignItems: 'baseline'
+            }
+        },
+        justify: {
+            start: {
+                justifyContent: 'flex-start'
+            },
+            center: {
+                justifyContent: 'center'
+            },
+            end: {
+                justifyContent: 'flex-end'
+            },
+            between: {
+                justifyContent: 'space-between'
+            }
+        },
+        wrap: {
+            noWrap: {
+                flexWrap: 'nowrap'
+            },
+            wrap: {
+                flexWrap: 'wrap'
+            },
+            wrapReverse: {
+                flexWrap: 'wrap-reverse'
+            }
+        },
+        gap: {
+            1: {
+                gap: '$1'
+            },
+            2: {
+                gap: '$2'
+            },
+            3: {
+                gap: '$3'
+            },
+            4: {
+                gap: '$4'
+            },
+            5: {
+                gap: '$5'
+            },
+            6: {
+                gap: '$6'
+            },
+            7: {
+                gap: '$7'
+            },
+            8: {
+                gap: '$8'
+            },
+            9: {
+                gap: '$9'
+            }
+        }
+    },
+
+    defaultVariants: {
+        direction: 'row',
+        align: 'stretch',
+        justify: 'start',
+        wrap: 'noWrap'
+    }
+});
+
+export default Flex;