import * as React from 'react';
import Anchor from '../anchor';

const NavItem = (props: { text: string, href: string }) => (
    <div style={headerStyle}>
        <Anchor href={props.href} text={props.text} />
    </div>
)

const headerStyle: React.CSSProperties = {
    color: 'white',
    fontSize: '1.2em',
    fontWeight: 'bold',
    paddingRight: '20px',
    height: '20px',
    display: 'block'
}

export default NavItem
import * as React from 'react';

const headerStyle: React.CSSProperties = {
    color: 'white',
    fontSize: '1.2em',
    fontWeight: 'bold',
    paddingLeft: '20px',
    height: '20px',
    display: 'block'
}

const NavItem = (props: { name: string, href: string }) => (
    <div style={headerStyle}>
        <a href={props.href}>
            {props.name}
        </a>
    </div>
)

export default NavItem
--- 
+++ 
@@ -1,20 +1,19 @@
 import * as React from 'react';
+import Anchor from '../anchor';
+
+const NavItem = (props: { text: string, href: string }) => (
+    <div style={headerStyle}>
+        <Anchor href={props.href} text={props.text} />
+    </div>
+)
 
 const headerStyle: React.CSSProperties = {
     color: 'white',
     fontSize: '1.2em',
     fontWeight: 'bold',
-    paddingLeft: '20px',
+    paddingRight: '20px',
     height: '20px',
     display: 'block'
 }
 
-const NavItem = (props: { name: string, href: string }) => (
-    <div style={headerStyle}>
-        <a href={props.href}>
-            {props.name}
-        </a>
-    </div>
-)
-
 export default NavItem
Change NavItem padding to right and use Anchor cpnt
