diff --git a/src/components/elements/AuthHeader.js b/src/components/elements/AuthHeader.js new file mode 100644 index 0000000..218b8cd --- /dev/null +++ b/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 ( + +

+ Register +

+ + Sign in + +
+ ); + } else { + return ( + +

+ Sign in +

+ + Register + +
+ ); + } +}; + +AuthHeader.propTypes = { + register: PropsTypes.bool.isRequired, +}; + +export default AuthHeader; \ No newline at end of file diff --git a/src/pages/Register.js b/src/pages/Register.js index e2fe3e6..d50ef3a 100644 --- a/src/pages/Register.js +++ b/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 ( - - siema + + ); }; diff --git a/src/utils/containers.js b/src/utils/containers.js index 4df1e88..966c0e7 100644 --- a/src/utils/containers.js +++ b/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)`