From 5625cc0cb4fe90b4af5a5f820341f9004125024d Mon Sep 17 00:00:00 2001 From: CGottschallJ Date: Tue, 9 Jan 2018 16:01:28 -0600 Subject: [PATCH] initial Commit: completed all 7 components and have them displaying on page with borders. --- public/App.js | 2 +- public/Main.js | 4 +++- public/index.html | 12 ++++++------ src/App.js | 15 ++++++++++++++- src/components/CreateTweet.js | 15 +++++++++++++++ src/components/Friends.js | 24 ++++++++++++++++++++++++ src/components/Header.js | 21 +++++++++++++++++++++ src/components/NavBar.js | 25 +++++++++++++++++++++++++ src/components/Profile.js | 32 ++++++++++++++++++++++++++++++++ src/components/Trending.js | 30 ++++++++++++++++++++++++++++++ src/components/Tweets.js | 18 ++++++++++++++++++ 11 files changed, 189 insertions(+), 9 deletions(-) create mode 100644 src/components/CreateTweet.js create mode 100644 src/components/Friends.js create mode 100644 src/components/Header.js create mode 100644 src/components/NavBar.js create mode 100644 src/components/Profile.js create mode 100644 src/components/Trending.js create mode 100644 src/components/Tweets.js diff --git a/public/App.js b/public/App.js index a46a147..42bdaff 100644 --- a/public/App.js +++ b/public/App.js @@ -1,3 +1,3 @@ function App(){ return
-} \ No newline at end of file +} diff --git a/public/Main.js b/public/Main.js index cb7c512..e3e618a 100644 --- a/public/Main.js +++ b/public/Main.js @@ -1,3 +1,5 @@ +import React from 'react'; + function Main(){ return
Hello
-} \ No newline at end of file +} diff --git a/public/index.html b/public/index.html index 460ce2f..5d23689 100644 --- a/public/index.html +++ b/public/index.html @@ -20,18 +20,18 @@
- --> - + diff --git a/src/App.js b/src/App.js index d7bd2a7..6f17337 100644 --- 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 (
- +
+ + + + + +
); } diff --git a/src/components/CreateTweet.js b/src/components/CreateTweet.js new file mode 100644 index 0000000..699f854 --- /dev/null +++ b/src/components/CreateTweet.js @@ -0,0 +1,15 @@ +import React from 'react'; + +function CreateTweet() { + const compStyle = { + border: '2px solid blue' + } + return ( +
+ + +
+ ) +} + +export default CreateTweet; diff --git a/src/components/Friends.js b/src/components/Friends.js new file mode 100644 index 0000000..42023d5 --- /dev/null +++ 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 ( +
+

Twitter Friends

+
    +
  1. Jordon Reese
    2. +
  2. Jon Woo
    3. +
  3. Craig Copeland
    4. +
  4. Jonathan Whitman
    5. +
  5. Shelby Gottschall
    6. +
+
+ ); +} + +export default Friends; diff --git a/src/components/Header.js b/src/components/Header.js new file mode 100644 index 0000000..7b0abca --- /dev/null +++ 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 ( +
+ +

Twitter Clone Project

+
+ ) +} + +export default Header; diff --git a/src/components/NavBar.js b/src/components/NavBar.js new file mode 100644 index 0000000..097960b --- /dev/null +++ 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 ( +
+ + + + + +
+ ) +} + +export default NavBar; diff --git a/src/components/Profile.js b/src/components/Profile.js new file mode 100644 index 0000000..8de431c --- /dev/null +++ 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 ( +
+ +

{property.user.firstName} {property.user.lastName}

+

Username: {property.user.username}

+

Tweets: {property.user.tweets}

+
+ ) +} + +export default Profile; diff --git a/src/components/Trending.js b/src/components/Trending.js new file mode 100644 index 0000000..c30b9db --- /dev/null +++ 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 ( +
+

Trending Topics

+ +
+ ); +} + +export default Trending; diff --git a/src/components/Tweets.js b/src/components/Tweets.js new file mode 100644 index 0000000..0168748 --- /dev/null +++ b/src/components/Tweets.js @@ -0,0 +1,18 @@ +import React from 'react'; + +function Tweets() { + const compStyle = { + border: '2px solid orange' + } + return ( +
+
Tweet 1
+
Tweet 2
+
Tweet 3
+
Tweet 4
+
Tweet 5
+
+ ) +} + +export default Tweets;