AustinCodingAcademy · CGottschallJ · Jan 9, 2018
diff --git a/public/App.js b/public/App.js
@@ -1,3 +1,3 @@
 function App(){
   return <div><Main /></div>
-}
+}
diff --git a/public/Main.js b/public/Main.js
@@ -1,3 +1,5 @@
+import React from 'react';
+
 function Main(){
   return <div>Hello</div>
-}
+}
diff --git a/public/index.html b/public/index.html
@@ -20,18 +20,18 @@
   </head>
   <body>
     <div id="root"></div>
-    <script>
+    <!-- <script>
       var tweets = [
         "ACA class was so awesome today.",
         "I just checked out that new restaurant, it was okay",
         "I just saw a movie that changed my life",
         "shirts are 50% of at Macy's today"
       ];
-    
+
     </script>
 
     <script>
-    
+
       var h1 = document.createElement("h1");
       h1.innerHTML = tweets[0];
       document.body.appendChild(h1);
@@ -41,10 +41,10 @@
     <script type="text/jsx">
     var tweet = React.createElement("h1",null,tweets[1])
     ReactDOM.render(
-      tweet, 
+      tweet,
       document.getElementById('root')
     );
-    </script>
+    </script> -->
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
@@ -55,6 +55,6 @@
       To begin the development, run `npm start`.
       To create a production bundle, use `npm run build`.
     -->
-   
+
   </body>
 </html>
diff --git a/src/App.js b/src/App.js
@@ -1,11 +1,24 @@
 import React, { Component } from 'react';
 import logo from './logo.svg';
 import './App.css';
+import Header from './components/Header.js';
+import Friends from './components/Friends.js';
+import NavBar from './components/NavBar.js';
+import Profile from './components/Profile.js';
+import Trending from './components/Trending.js';
+import Tweets from './components/Tweets.js';
+import CreateTweet from './components/CreateTweet.js';
 
 function App(){
    return (
     <div>
-
+      <Header />
+      <NavBar />
+      <Profile />
+      <Friends />
+      <Trending />
+      <CreateTweet />
+      <Tweets />
     </div>
   );
  }

diff --git a/src/components/CreateTweet.js b/src/components/CreateTweet.js
@@ -0,0 +1,15 @@
+import React from 'react';
+
+function CreateTweet() {
+  const compStyle = {
+    border: '2px solid blue'
+  }
+  return (
+    <div style={compStyle}>
+      <input placeholder="What is going on...?" />
+      <button>Send</button>
+    </div>
+  )
+}
+
+export default CreateTweet;
diff --git a/src/components/Friends.js b/src/components/Friends.js
@@ -0,0 +1,24 @@
+import React from 'react';
+
+function Friends() {
+  const compStyle = {
+    border: '2px solid purple'
+  }
+  const friendStyle = {
+    fontSize: '12px'
+  }
+  return (
+    <div style={compStyle}>
+      <h2>Twitter Friends</h2>
+        <ol style={friendStyle}>
+          <li>Jordon Reese</li>
+          <li>Jon Woo</li>
+          <li>Craig Copeland</li>
+          <li>Jonathan Whitman</li>
+          <li>Shelby Gottschall</li>
+        </ol>
+    </div>
+  );
+}
+
+export default Friends;
diff --git a/src/components/Header.js b/src/components/Header.js
@@ -0,0 +1,21 @@
+import React from 'react';
+
+
+function Header () {
+  const imgStyle = {
+    height: '50px',
+    width:'50px',
+  }
+  const compStyle = {
+    display: 'flex',
+    border: '2px solid blue'
+  }
+  return (
+    <div style= {compStyle}>
+      <img style={imgStyle} src='http://icons.iconarchive.com/icons/uiconstock/socialmedia/512/Twitter-icon.png' />
+      <h1>Twitter Clone Project</h1>
+    </div>
+  )
+}
+
+export default Header;
diff --git a/src/components/NavBar.js b/src/components/NavBar.js
@@ -0,0 +1,25 @@
+import React from 'react';
+
+const buttonStyle= {
+  background: 'lightBlue',
+  marginLeft: '10px',
+  marginRight: '10px'
+}
+
+function NavBar () {
+  const compStyle = {
+    display: 'flex',
+    border: '2px solid green'
+  }
+  return (
+    <div style={compStyle}>
+      <button style={buttonStyle}>Home</button>
+      <button style={buttonStyle}>Tweets</button>
+      <button style={buttonStyle}>Friends</button>
+      <button style={buttonStyle}>Trending</button>
+      <button style={buttonStyle}>News</button>
+    </div>
+  )
+}
+
+export default NavBar;
diff --git a/src/components/Profile.js b/src/components/Profile.js
@@ -0,0 +1,32 @@
+import React from 'react';
+
+
+function Profile(props) {
+  const property = {
+    user: {
+      firstName: 'Cam',
+      lastName: 'Gottschall',
+      username: 'CGottsJ',
+      tweets: 5,
+      imgURL: "http://www.tjohearn.com/wordpress/wp-content/uploads/2016/06/twitter-egg-270x270.png"
+    }
+  }
+  const imgStyle = {
+    height: '100px',
+    width: '100px',
+    marginTop: '20px'
+  }
+  const compStyle = {
+    border: '2px solid red'
+  }
+  return (
+    <div style={compStyle}>
+      <img src={property.user.imgURL} style={imgStyle} />
+      <h2>{property.user.firstName} {property.user.lastName}</h2>
+      <h3>Username: {property.user.username}</h3>
+      <h4>Tweets: {property.user.tweets}</h4>
+    </div>
+  )
+}
+
+export default Profile;
diff --git a/src/components/Trending.js b/src/components/Trending.js
@@ -0,0 +1,30 @@
+import React from 'react';
+
+function Trending() {
+  const compStyle = {
+    border: '2px solid yellow'
+  }
+  const trendStyle = {
+    fontSize: '15px',
+    color: 'lightBlue',
+    display: 'flex',
+  }
+  const topicStyle= {
+    marginLeft: '10px',
+    marginRight: '10px'
+  }
+  return (
+    <div style={compStyle}>
+      <h2>Trending Topics</h2>
+        <ul style={trendStyle}>
+          <a style={topicStyle}>#POTUS</a>
+          <a style={topicStyle}>#Bitcoin</a>
+          <a style={topicStyle}>#AustinCoding</a>
+          <a style={topicStyle}>#TwitterProject</a>
+          <a style={topicStyle}>#NFL</a>
+        </ul>
+    </div>
+  );
+}
+
+export default Trending;
diff --git a/src/components/Tweets.js b/src/components/Tweets.js
@@ -0,0 +1,18 @@
+import React from 'react';
+
+function Tweets() {
+  const compStyle = {
+    border: '2px solid orange'
+  }
+  return (
+    <div style={compStyle}>
+      <div>Tweet 1</div>
+      <div>Tweet 2</div>
+      <div>Tweet 3</div>
+      <div>Tweet 4</div>
+      <div>Tweet 5</div>
+    </div>
+  )
+}
+
+export default Tweets;