react-icons/bs#BsHeart JavaScript Examples

The following examples show how to use react-icons/bs#BsHeart. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: ShowPost.js    From devagram with GNU General Public License v3.0 6 votes vote down vote up 
ShowPost = ({ post, close }) => {
  return (
    <div className={classes.ShowPost}>
      <div className={classes.backdrop} onClick={close}></div>
      <div className={classes.post}>
        <FaTimes className={classes.closeBtn} onClick={close} />
        <div className={classes.image}>
          <img src={post.photoUrl} alt="post" />
        </div>
        <div className={classes.detail}>
          <div className={classes.user}>
            <img
              height="40"
              width="40"
              src="https://avatars2.githubusercontent.com/u/52067783?s=460&u=212f06bdac348e4ac59204857029ed7d27a2466b&v=4"
              alt="dp"
            />
            <span>{post.user}</span>
          </div>
          <div className={classes.comments}>Comments</div>
          <div className={classes.actions}>
            <div className="left">
              <BsHeart className="heart" />
              <BsChat className="comment" style={{ margin: "0 0.3rem" }} />
              <FaRegPaperPlane className="send" />
            </div>
            <FaRegBookmark className="bookmark" />
          </div>
          <p style={{ marginLeft: "1rem" }}> {post.likes} Likes </p>
          <div className={classes.addComment}>
            <input type="text" placeholder="Add comment" />
            <button>send</button>
          </div>
        </div>
      </div>
    </div>
  );
}
Example #2
Source File: Post.js    From devagram with GNU General Public License v3.0 5 votes vote down vote up 
Post = (props) => {
  return (
    <Fragment>
      <div className="allPosts">
        <div className="post">
          <div className="Story img">
            <img src="https://picsum.photos/seed/picsum/200/300" alt=""></img>{" "}
            <b className="profile">Shankhanil</b>
          </div>
          <div className="desc">
            <p>
              Lorem Ipsum is simply dummy text of the printing and typesetting
              industry. Lorem Ipsum has been the industry's standard dummy text
              ever since the 1500s, when an unknown printer took a galley of
              type and scrambled it to make a type specimen book. It has
              survived not only five centuries, but also the leap into
              electronic typesetting, remaining essentially unchanged. It was
              popularised in the 1960s with the release of Letraset sheets
              containing Lorem Ipsum passages, and more recently with desktop
              publishing software like Aldus PageMaker including versions of
              Lorem Ipsum.
            </p>

            <img
              className="d-block w-100"
              src="https://images.unsplash.com/photo-1602526430780-782d6b1783fa?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80"
              alt="post"
            />
          </div>

          <div className="reaction">
            <div className="row">
              <div className="left">
                <div className="type">
                  <BsHeart className="heart" />
                </div>
                <div className="type">
                  <BsChat className="comment" />
                </div>
                <div className="type">
                  <FaRegPaperPlane className="send" />
                </div>
              </div>
              <div className="type">
                <FaRegBookmark className="bookmark" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </Fragment>
  );
}