<html>
<head>
<meta charset="utf-8" />
<!-- Bootstrap 4 Styling -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<!-- FontAwesome Icons -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- React CDNS -->
</head>
<body>
<div class="content">
<div id="root"></div>
</div>
</body>
</html>html,
body,
.content {
background-color: #ccc;
height: 100%;
}
img {
margin-right: 30px;
}
.profile-row {
display: flex;
flex-direction: row;
margin-bottom: 20px;
}
p, .like-component {
margin-left: 20px;
}
.profile-pic {
height: 70px;
width: 70px;
}
.post-time {
color: #90949c;
}
.blue-icon {
color: #0099ff;
}
.no-outline {
border-color: white !important;
}
class Comment extends React.Component {
constructor () {
super()
this.handleChange = this.handleChange.bind(this)
this.state = {
characterCount: 0
}
}
handleChange (event) {
console.log(this)
this.setState({
characterCount: event.target.value.length
})
}
render() {
return (
<div>
<textarea className="form-control" placeholder="Write a comment..." onChange={this.handleChange}/>
<small>{this.props.maxLetters - this.state.characterCount} Remaining</small>
</div>
)
}
}
class LikeIcon extends React.Component {
render () {
return (
<div>
<span className="fa-stack fa-sm">
<i className="fa fa-circle fa-stack-2x blue-icon" />
<i className="fa fa-thumbs-up fa-stack-1x fa-inverse" />
</span>
</div>
)
}
}
class Like extends React.Component {
constructor() {
super()
this.state = {
liked: false
}
this.toggleLike = this.toggleLike.bind(this)
}
toggleLike () {
this.setState(previousState => ({
liked: !previousState.liked
}))
}
render() {
return (
<div className="like-component">
{/* Include the LikeIcon subcomponent within the Like component*/}
{this.state.liked && <LikeIcon />}
<hr />
<button type="button" className="btn no-outline btn-secondary" onClick={this.toggleLike}>
<i
className="fa fa-thumbs-o-up fa-4 align-middle"
aria-hidden="true"
/>
<span className="align-middle">Like</span>
</button>
</div>
)
}
}
class Status extends React.Component {
render() {
return (
<div className="col-8 offset-2">
<div className="card">
<div className="card-block">
<div className="profile-row">
<img src="https://zen-of-programming.com/react-intro/selfiesquare.jpg" className="profile-pic" />
<div className="info">
<div className="row">
<a href="#">The Zen of Programming</a>
</div>
<div className="row">
<small className="post-time">10 mins</small>
</div>
</div>
</div>
</div>
<p>Hello, world!</p>
<Like />
</div>
<div className="card-footer text-muted">
<Comment maxLetters={140} />
</div>
</div>
)
}
}
ReactDOM.render(<Status />, document.getElementById("root"))
External CSS
This Pen doesn't use any external CSS resources.