styled component from Emmanuel Pacheco Yupit

session3/styledComponents/src/App.js

@@ -1,41 +1,48 @@
-import React, { Component } from 'react'
-import { Link } from 'react-router-dom'
-import './App.css'
+import React, { Component } from 'react';
+import { injectGlobal } from 'styled-components';
+import NavbarList from './components/NavbarList';
+import { Nav } from './App.style';
 
-const getLinks = () => [ { label: 'Home', url: '/' }, { label: 'Woof!', url: '/dog' }, { label: 'Hello!', url: '/hello' } ]
+injectGlobal`
+@keyframes ul {
+  0% { 
+   width:0;
+ }
+ 100% { 
+   width:calc(100% - 23px);
+ }
+}
+`;
+
+const getLinks = () => [
+  { label: 'Home', url: '/' },
+  { label: 'Woof!', url: '/dog' },
+  { label: 'Hello!', url: '/hello' },
+];
 
 class App extends Component {
-  constructor (props) {
-    super(props)
+  constructor(props) {
+    super(props);
     this.state = {
       selected: '/',
-      links: []
-    }
-    this.renderLinks = this.renderLinks.bind(this)
+      links: [],
+    };
+    this.renderLinks = this.renderLinks.bind(this);
   }
 
-  componentDidMount () {
+  componentDidMount() {
     this.setState({
-      links: getLinks()
-    })
+      links: getLinks(),
+    });
   }
 
-  renderLinks () {
-    return this.state.links.map(({url, label}) => (
-      <li className='link' key={url}>
-        <Link to={url}>{label}</Link>
-        <span className='border' />
-      </li>
-    ))
+  renderLinks() {
+    return this.state.links.map(link => <NavbarList link={link} />);
   }
 
-  render () {
-    return (
-      <ul className='nav'>
-        {this.renderLinks()}
-      </ul>
-    )
+  render() {
+    return <Nav>{this.renderLinks()}</Nav>;
   }
 }
 
-export default App
+export default App;

session3/styledComponents/src/App.style.js

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+export const Nav = styled.ul`
+  font-family: 'Trebuchet MS';
+  font-size: 17px;
+  list-style: none;
+  margin-top: 20px;
+  text-align: center;
+`;

session3/styledComponents/src/components/NavbarList/index.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { List, Link } from './index.style';
+
+const NavbarList = ({ link }) => {
+  const { url, label } = link;
+  return (
+    <List>
+      <Link to={url}>{label}</Link>
+      <span />
+    </List>
+  );
+};
+
+export default NavbarList;

session3/styledComponents/src/components/NavbarList/index.style.js

@@ -0,0 +1,33 @@
+import styled from 'styled-components';
+import { Link as RouterLink } from 'react-router-dom';
+
+export const List = styled.li`
+  display: inline;
+  position: relative;
+
+  span {
+    background: #0088cc;
+    bottom: -10px;
+    display: block;
+    height: 4px;
+    left: 10px;
+    position: absolute;
+    width: calc(100% - 23px);
+  }
+`;
+
+export const Link = styled(RouterLink)`
+  color: #333;
+  display: inline-block;
+  padding: 10px;
+  text-decoration: none;
+
+  :hover {
+    color: #0088cc;
+  }
+
+  :hover ~ span {
+    animation: ul 0.3s ease-out;
+    background: #333;
+  }
+`;