AuthHeader component init

src/components/elements/AuthHeader.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import {FlexRow} from '../../utils/containers';
+import styled from 'styled-components';
+import {H3} from '../../utils/fonts';
+import {Link} from 'react-router-dom';
+import PropsTypes from 'prop-types';
+
+const AuthHeaderStyle = styled(FlexRow)`
+  border-width: 1px 1px 0 1px;
+  border-style: solid;
+  border-color: ${({theme}) => theme.colors.dark05};
+  width: 260px;
+  height: 48px;
+  justify-content: space-around;
+
+  h1 {
+    color: ${({theme}) => theme.colors.green};
+  }
+`;
+
+const AuthHeader = (props) => {
+    if (props.register) {
+        return (
+            <AuthHeaderStyle>
+                <H3 as='h1' order='2'>
+                    Register
+                </H3>
+                <Link to='/login'>
+                    Sign in
+                </Link>
+            </AuthHeaderStyle>
+        );
+    } else {
+        return (
+            <AuthHeaderStyle>
+                <H3 as='h1'>
+                    Sign in
+                </H3>
+                <Link to='/register'>
+                    Register
+                </Link>
+            </AuthHeaderStyle>
+        );
+    }
+};
+
+AuthHeader.propTypes = {
+    register: PropsTypes.bool.isRequired,
+};
+
+export default AuthHeader;

src/pages/Register.js

@@ -1,10 +1,11 @@
 import React from 'react';
 import {FlexColumn} from '../utils/containers';
+import AuthHeader from '../components/elements/AuthHeader';
 
 const Register = () => {
     return (
-        <FlexColumn margin='100px 0'>
+        <FlexColumn width='100%' height='100vh'>
-            siema
+            <AuthHeader register={true}/>
         </FlexColumn>
     );
 };

src/utils/containers.js

@@ -22,6 +22,7 @@ const Container = styled.div`
   text-transform: ${({textTransform}) => textTransform ? textTransform : 'none'};
   opacity: ${({opacity}) => opacity ? opacity : '1'};
   transform: translate(${({translateX}) => translateX ? translateX : 0}, ${({translateY}) => translateY ? translateY : 0});
+  order: ${({order}) => order ? order : '0'};
 `;
 
 const FlexRow = styled(Container)`