Create listing page and stepper component

Author: albertodev7

client/src/Components/Navbar/index.tsx

@@ -63,6 +63,12 @@ class C extends React.Component<RouteComponentProps<{}>, State> {
                 </Row>
 
                 <Row>
+                    <NavLink
+                        invertColors={isHomePage}
+                        onClick={() => push('/createListing')}
+                    >
+                        Zostan gospodarzem
+                    </NavLink>
                     <NavLink
                         invertColors={isHomePage}
                         onClick={() => push('/listings')}

client/src/Components/Navbar/style.tsx

@@ -31,7 +31,7 @@ export const Svg = styled.svg<InvertColors>`
 export const NavLink = styled.p<InvertColors>`
     margin: 0 20px 0 20px;
     font-size: 14px;
-    font-weight: 600;
-    color: ${p => (p.invertColors ? 'white' : '#494a55')};
+    font-weight: 500;
+    color: ${p => (p.invertColors ? 'white' : '#484848')};
     cursor: pointer;
 `

client/src/Components/Stepper/index.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react'
+
+import { StepperWrapper, StepperFill } from './style'
+
+interface Props {
+    currentStep: number
+    maxSteps: number
+}
+
+export const Stepper: React.SFC<Props> = ({ currentStep, maxSteps }) => (
+    <StepperWrapper>
+        <StepperFill currentStep={currentStep} maxSteps={maxSteps} />
+    </StepperWrapper>
+)

client/src/Components/Stepper/style.tsx

@@ -0,0 +1,20 @@
+import styled from 'styled-components'
+
+interface Stepper {
+    currentStep: number
+    maxSteps: number
+}
+
+export const StepperWrapper = styled.div`
+    width: 100%;
+    height: 10px;
+    background-color: #eceeed;
+`
+export const StepperFill = styled.div<Stepper>`
+    width: ${p => (p.currentStep * 100) / p.maxSteps}%;
+    height: 10px;
+    border-top-right-radius: 25px;
+    border-bottom-right-radius: 25px;
+    background-color: #00a597;
+    transition: width 200ms ease;
+`

client/src/Pages/CreateListing/Components/Form/index.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react'
+
+import { Container, Wrapper, White, Gray } from './style'
+import { Stepper } from '../../../../Components/Stepper'
+
+interface State {
+    step: number
+}
+
+export class Form extends React.Component<{}, State> {
+    public readonly state = {
+        step: 1
+    }
+
+    public render() {
+        return (
+            <>
+                <Stepper currentStep={this.state.step} maxSteps={2} />
+                <Container>
+                    <White />
+                    <Gray />
+                    <Wrapper>
+                        <p
+                            onClick={() =>
+                                this.setState(({ step }) => ({
+                                    step: step + 1
+                                }))
+                            }
+                        >
+                            lol
+                        </p>
+                    </Wrapper>
+                </Container>
+            </>
+        )
+    }
+}

client/src/Pages/CreateListing/Components/Form/style.tsx

@@ -0,0 +1,30 @@
+import styled from 'styled-components'
+
+export const Container = styled.div`
+    width: 100%;
+    height: calc(100vh - 90px);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+`
+
+export const White = styled.div`
+    width: 65%;
+    height: calc(100vh - 90px);
+    position: fixed;
+    left: 0;
+    background-color: white;
+`
+export const Gray = styled.div`
+    width: 35%;
+    height: calc(100vh - 90px);
+    position: fixed;
+    right: 0;
+    background-color: #fafafa;
+`
+export const Wrapper = styled.div`
+    width: 550px;
+    height: 650px;
+    background-color: red;
+    z-index: 200;
+`

client/src/Pages/CreateListing/index.tsx

@@ -0,0 +1,5 @@
+import * as React from 'react'
+
+import { Form } from './Components/Form'
+
+export const CreateListing: React.SFC<{}> = () => <Form />

client/src/Routes/index.tsx

@@ -5,6 +5,7 @@ import { Navbar } from '../Components/Navbar'
 import { Home } from '../Pages/Home'
 import { Listings } from '../Pages/Listings'
 import { Listing } from '../Pages/Listing'
+import { CreateListing } from '../Pages/CreateListing'
 
 export const Routes: React.SFC<{}> = () => (
     <BrowserRouter>
@@ -15,6 +16,7 @@ export const Routes: React.SFC<{}> = () => (
                     <Navbar />
                     <Route path="/listings" component={Listings} />
                     <Route path="/listing/:id" component={Listing} />
+                    <Route path="/createListing" component={CreateListing} />
                 </>
             </Route>
         </Switch>