Feature/user page design

front-end/src/components/App/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { BrowserRouter, withRouter, Switch, Route } from 'react-router-dom'
 
-import { Home, Register, Login, PrivateRoute, ChatRoom , Contributors } from '..'
+import { Home, Register, Login, PrivateRoute, ChatRoom , Contributors , UserProfile } from '..'
 import QuizMcq  from '../Quiz/mcq/quizMcq';
 
 import '../../styles/index.css'
@@ -13,6 +13,7 @@ const App = () => (
 			<Route exact path ="/contributors" component ={Contributors} />
             <Route exact path="/sign-in" component={Login} />
             <Route exact path="/sign-up" component={Register} />
+			<Route exact path="/userProfile" component={UserProfile} />
             <Route exact path="/quizmcq" component={QuizMcq} />
             <PrivateRoute exact path="/chat-room" component={ChatRoom} />
         </Switch>

front-end/src/components/UserProfile/BlogOrFavorite.jsx

@@ -0,0 +1,45 @@
+import React, { Component } from 'react'
+import './index.scss'
+import pinIcon from './assests/pin.png'
+import dummyImg from './assests/dummy_image.png'
+import heartImg from './assests/heartIcon.png'
+
+export class BlogOrFavorite extends Component {
+	render() {
+		return (
+			<React.Fragment>
+				<li className="fx-b30 dFlexRow blogItem">
+						<div className="fx-b100 dFlexRow">
+						<div className="blogPageIcon">
+							{this.props.view === "favorite" ? 
+							 <span><img src={heartImg}/></span>
+							: 
+							<span><img src={pinIcon} alt="pinBlog" />Pinned Blogs</span>
+						}
+		</div>
+
+							<div className="dFlexColumn jContentFlexStart">
+								<div className="fx-b20 blogImage">
+									<img className="round-img" src={dummyImg} alt="dummy" />
+								</div>
+								<div className="fx-b80 dFlexRow blogContent">
+									<div className = "fx-b100">
+										<input className="blogInput" type="text" readOnly={this.props.view !== "blog"} placeholder="blog post 1" />
+									</div>
+									<div className = "fx-b100">
+										<textarea className="blogInput" rows="3" readOnly={this.props.view !== "blog"} type="text" placeholder="Brief Intro about the blog post"  />
+									</div>
+									<div className="fx-b100 blogBtns">
+										<button>Comment</button>
+										<button>Share Via</button>
+									</div>
+								</div>
+							</div>
+							</div>
+						</li>
+			</React.Fragment>
+		)
+	}
+}
+
+export default BlogOrFavorite

front-end/src/components/UserProfile/ProfileHeader.jsx

@@ -0,0 +1,46 @@
+import React, { Component } from 'react'
+import './index.scss'
+import dummyImg from './assests/dummy_image.png'
+import fbIcon from './assests/facebookIcon.png'
+import githubIcon from './assests/githubIcon.png'
+import twitterIcon from './assests/twitterIcon.png'
+import instagramIcon from './assests/InstagramIcon.png'
+export class ProfileHeader extends Component {
+	render() {
+		return (
+			<div className="dFlexRow headerContainer"> 
+				<div className="profileAvatarDiv">
+					<img className="profileAvatar round-img" src={dummyImg} alt="dummy" />
+				</div>
+				<div className="fx-b40 headerProfileDetailsContainer">
+					<h3>User Name</h3>
+					<h5>@profile</h5>
+					<p>Brief bio about the user </p>
+					</div>
+					<div className="fx-b40 socialLinksDiv">
+						<ul className="socialLinks">
+						<li>
+							<img src={githubIcon} alt="github-icon" title="github-icon" />
+							</li>
+
+						<li>
+							<img src={twitterIcon} alt="twitter-icon" title="twitter-icon" />
+							</li>
+
+						<li>
+							<img src={instagramIcon} alt="instagram-icon" title="instagram-icon" />
+							</li>
+
+						<li >
+							<img src={fbIcon} alt="facebook-icon" title="facebook-icon"/>
+							</li>
+							</ul>
+							<button className="editProfileBtn">Edit Profile</button>
+						</div>
+
+			</div>
+		)
+	}
+}
+
+export default ProfileHeader

front-end/src/components/UserProfile/index.jsx

@@ -0,0 +1,54 @@
+import React, { Component } from 'react'
+import ProfileHeader from './ProfileHeader'
+import BlogOrFavorite from './BlogOrFavorite'
+
+export class UserProfile extends Component {
+	state = {
+		view: "blog",
+		blogs: ["blog1", "blog2", "blog3"],
+
+	}
+	handleViewChange = (view) => {
+		this.setState({ view })
+	}
+	render() {
+		return (
+			<div>
+				<ProfileHeader />
+				<div className="mainDiv">
+					<ul className="profileNavbar">
+						<li className={this.state.view === "blog" ? "nav-item active " : "nav-item"} onClick={() => this.handleViewChange("blog")}>
+							Blogs
+						</li>
+						<li className={this.state.view === "favorite" ? "nav-item active " : "nav-item"} onClick={() => this.handleViewChange("favorite")}>
+							Favorite
+						</li>
+						<li className={this.state.view === "followers" ? "nav-item active " : "nav-item"} onClick={() => this.handleViewChange("followers")}>
+							Followers
+						</li>
+						<li className={this.state.view === "following" ? "nav-item active " : "nav-item"} onClick={() => this.handleViewChange("following")}>
+							Followings
+						</li>
+					</ul>
+					{this.state.view === "blog" || this.state.view === "favorite"
+						?
+						<ul className="contentContainer dFlexRow">
+							{this.state.view === "blog" ?
+								this.state.blogs.map((item, index) => (
+									<BlogOrFavorite key={index} view={this.state.view} />
+								))
+								:
+								''
+							}
+
+						</ul>
+						:
+						''
+					}
+				</div>
+			</div>
+		)
+	}
+}
+
+export default UserProfile