forked from S2GBird/.github
-
Notifications
You must be signed in to change notification settings - Fork 0
/
singlepost.jsx
73 lines (64 loc) · 2.34 KB
/
singlepost.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
import React, { useEffect, useState } from 'react';
const PostContainer = () => {
const [isLiked, setIsLiked] = useState(false);
const commentsData = [
{ username: "Vizthewiz", text: "Great photo!" },
{ username: "Samsamzebra", text: "Love it!" },
{ username: "Miilovescats", text: "Awesome!" },
// Add more comments as needed
];
useEffect(() => {
const likeButton = document.querySelector('.like-button');
const heartIcon = likeButton.querySelector('i');
likeButton.addEventListener('click', () => {
// Toggle heart icon
heartIcon.classList.toggle('far', !isLiked);
heartIcon.classList.toggle('fas', isLiked);
// Toggle isLiked
setIsLiked(!isLiked);
});
}, [isLiked]);
return (
<div className="post-container">
<div className="post-header">
<div className="user-info">
<img src="bird pixel.jpg" alt="User Avatar" />
<p className="username">FirstUser101</p>
</div>
<p className="timestamp">Posted 2 hours ago</p>
<i className="fas fa-ellipsis-h"></i>
</div>
<div className="post-content">
<img src="birdvisionphoto.png" alt="Post Image" />
<p className="caption">Check this out! #Rarebird</p>
<button className="interaction-buttons like-button">
<i className={`fas fa-heart ${isLiked ? 'fas' : 'far'}`}></i>
</button>
<button className="interaction-buttons">
<i className="fas fa-share"></i>
</button>
<button className="interaction-buttons">
<i className="fas fa-comment"></i>
</button>
<button className="interaction-buttons save">
<i className="fas fa-download"></i>
</button>
</div>
<div className="comments-section">
{/* Comments added with JavaScript */}
{commentsData.map((commentData, index) => (
<div key={index} className="comment">
<p className="username">{`${commentData.username}:`}</p>
<p className="comment-text">{commentData.text}</p>
</div>
))}
</div>
<div className="engagement-metrics">
<p className="likes-count">120 likes</p>
<p className="comments-count">View all comments</p>
<p className="shares-count">8 shares</p>
</div>
</div>
);
};
export default PostContainer;