Skip to content

Commit b982ce0

Browse files
SreePujitha01SreePujitha01
committed
Created ActivityComments.jsx, ActivityComments.module.css and modified routes.jsx, jsconfig.json
1 parent 0cd61fc commit b982ce0

File tree

4 files changed

+521
-1
lines changed

4 files changed

+521
-1
lines changed

‎jsconfig.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
{
22
"compilerOptions": {
3-
"baseUrl": "src"
3+
"ignoreDeprecations": "6.0"
4+
// "baseUrl": ".", // Removed because it is deprecated. Use path mapping or absolute imports as per https://aka.ms/ts6
45
}
56
}

‎src/components/CommunityPortal/Activities/activityId/ActivityComments.jsx‎

Lines changed: 282 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,282 @@
1+
import React, { useState } from 'react';
2+
import styles from './ActivityComments.module.css';
3+
4+
const mockEvent = {
5+
name: 'Event Name',
6+
location: 'San Francisco, CA 94108',
7+
link: 'https://devforum.zoom.us',
8+
date: 'Monday, Sept 2',
9+
time: '9:00 AM - 11:00 AM EDT',
10+
organizer: 'Alex Brain',
11+
capacity: '7 / 20',
12+
rating: 4,
13+
status: 'Activated',
14+
avatars: [
15+
'https://randomuser.me/api/portraits/women/44.jpg',
16+
'https://randomuser.me/api/portraits/men/45.jpg',
17+
'https://randomuser.me/api/portraits/women/46.jpg',
18+
'https://randomuser.me/api/portraits/men/47.jpg',
19+
'https://randomuser.me/api/portraits/women/48.jpg',
20+
],
21+
};
22+
23+
const mockComments = Array.from({ length: 3 }).map((_, idx) => ({
24+
id: idx + 1,
25+
name: 'Jane Doe',
26+
profilePic: 'https://randomuser.me/api/portraits/women/44.jpg',
27+
timestamp: '5 min ago',
28+
text:
29+
'this is activity comments. this is activity comments this is activity comments this is activity comments this is activity comments this is activity comments this is activity comments this is activity comments',
30+
visibility: 'Public',
31+
upvotes: 1,
32+
downvotes: 0,
33+
}));
34+
35+
function ActivityComments() {
36+
const [activeTab, setActiveTab] = useState('Engagement');
37+
const [commentTab, setCommentTab] = useState('Comment');
38+
const [comments, setComments] = useState(mockComments);
39+
const [commentInput, setCommentInput] = useState('');
40+
const [sortType, setSortType] = useState('Newest');
41+
42+
const handlePostComment = () => {
43+
if (!commentInput.trim()) return;
44+
setComments([
45+
{
46+
id: comments.length + 1,
47+
name: 'Jane Doe',
48+
profilePic: 'https://randomuser.me/api/portraits/women/44.jpg',
49+
timestamp: 'Just now',
50+
text: commentInput,
51+
visibility: 'Public',
52+
upvotes: 0,
53+
downvotes: 0,
54+
},
55+
...comments,
56+
]);
57+
setCommentInput('');
58+
};
59+
60+
return (
61+
<div>
62+
{/* Event Card */}
63+
<div className={styles.eventCard}>
64+
<div>
65+
<div className={styles.eventImage}>Finished</div>
66+
</div>
67+
<div className={styles.eventDetails}>
68+
<div style={{ display: 'flex', alignItems: 'center', gap: '12px', marginBottom: 8 }}>
69+
<span className={styles.eventMetaItem}>Event</span>
70+
<span className={styles.eventMetaItem}>/ In-person</span>
71+
</div>
72+
<div className={styles.eventTitle}>{mockEvent.name}</div>
73+
<div className={styles.eventMeta}>
74+
<span className={styles.eventMetaItem}>Location: {mockEvent.location}</span>
75+
<span className={styles.eventMetaItem}>
76+
Link:{' '}
77+
<a href={mockEvent.link} target="_blank" rel="noopener noreferrer">
78+
{mockEvent.link}
79+
</a>
80+
</span>
81+
</div>
82+
<div className={styles.eventMeta}>
83+
<span className={styles.eventMetaItem}>Date: {mockEvent.date}</span>
84+
<span className={styles.eventMetaItem}>Time: {mockEvent.time}</span>
85+
<span className={styles.eventMetaItem}>Organizer: {mockEvent.organizer}</span>
86+
</div>
87+
<div className={styles.eventMeta}>
88+
<span className={styles.eventMetaItem}>Capacity: {mockEvent.capacity}</span>
89+
<span className={styles.eventMetaItem}>
90+
Overall Rating: {'★'.repeat(mockEvent.rating) + '☆'.repeat(5 - mockEvent.rating)}
91+
</span>
92+
<span className={styles.eventStatus}>Activated</span>
93+
</div>
94+
<div className={styles.eventAvatars}>
95+
{mockEvent.avatars.map((src, i) => (
96+
<img key={i} src={src} alt="avatar" className={styles.avatar} />
97+
))}
98+
<span style={{ color: '#888', fontSize: '1rem', marginLeft: 4 }}>+5</span>
99+
</div>
100+
</div>
101+
<div className={styles.calendar}>
102+
<div style={{ fontWeight: 500, marginBottom: 8 }}>September 2024</div>
103+
<table style={{ width: '100%', fontSize: '0.95rem' }}>
104+
<thead>
105+
<tr style={{ color: '#888' }}>
106+
<th>S</th>
107+
<th>M</th>
108+
<th>T</th>
109+
<th>W</th>
110+
<th>T</th>
111+
<th>F</th>
112+
<th>S</th>
113+
</tr>
114+
</thead>
115+
<tbody>
116+
<tr>
117+
<td>1</td>
118+
<td>2</td>
119+
<td>3</td>
120+
<td>4</td>
121+
<td>5</td>
122+
<td>6</td>
123+
<td>7</td>
124+
</tr>
125+
<tr>
126+
<td>8</td>
127+
<td>9</td>
128+
<td>10</td>
129+
<td>11</td>
130+
<td>12</td>
131+
<td>13</td>
132+
<td>14</td>
133+
</tr>
134+
<tr>
135+
<td>15</td>
136+
<td>16</td>
137+
<td>17</td>
138+
<td>18</td>
139+
<td>19</td>
140+
<td>20</td>
141+
<td>21</td>
142+
</tr>
143+
<tr>
144+
<td>22</td>
145+
<td>23</td>
146+
<td>24</td>
147+
<td>25</td>
148+
<td>26</td>
149+
<td>27</td>
150+
<td>28</td>
151+
</tr>
152+
<tr>
153+
<td>29</td>
154+
<td>30</td>
155+
<td colSpan={5}></td>
156+
</tr>
157+
</tbody>
158+
</table>
159+
</div>
160+
</div>
161+
162+
{/* Tabs */}
163+
<div className={styles.tabs}>
164+
<button
165+
className={`${styles.tab} ${activeTab === 'Description' ? styles.tabActive : ''}`}
166+
onClick={() => setActiveTab('Description')}
167+
>
168+
Description
169+
</button>
170+
<button
171+
className={`${styles.tab} ${activeTab === 'Analysis' ? styles.tabActive : ''}`}
172+
onClick={() => setActiveTab('Analysis')}
173+
>
174+
Analysis
175+
</button>
176+
<button
177+
className={`${styles.tab} ${activeTab === 'Resource' ? styles.tabActive : ''}`}
178+
onClick={() => setActiveTab('Resource')}
179+
>
180+
Resource
181+
</button>
182+
<button
183+
className={`${styles.tab} ${activeTab === 'Engagement' ? styles.tabActive : ''}`}
184+
onClick={() => setActiveTab('Engagement')}
185+
>
186+
Engagement
187+
</button>
188+
</div>
189+
190+
{/* Engagement Tab Content */}
191+
{activeTab === 'Engagement' && (
192+
<div>
193+
<div className={styles.commentTabs}>
194+
<button
195+
className={`${styles.commentTabBtn} ${
196+
commentTab === 'Comment' ? styles.commentTabBtnActive : ''
197+
}`}
198+
onClick={() => setCommentTab('Comment')}
199+
>
200+
Comment
201+
</button>
202+
<button
203+
className={`${styles.commentTabBtn} ${
204+
commentTab === 'Feedback' ? styles.commentTabBtnActive : ''
205+
}`}
206+
onClick={() => setCommentTab('Feedback')}
207+
>
208+
Feedback
209+
</button>
210+
</div>
211+
212+
{/* Comment Section */}
213+
{commentTab === 'Comment' && (
214+
<div>
215+
<div className={styles.commentHeaderRow}>
216+
<span className={styles.commentCount}>
217+
Comment <span style={{ color: '#888', fontWeight: 400 }}>25</span>
218+
</span>
219+
<button className={styles.sortBtn}>
220+
<span style={{ fontSize: '1.1em' }}>⇅</span> Sort
221+
</button>
222+
</div>
223+
<div className={styles.commentBox}>
224+
<img
225+
src="https://randomuser.me/api/portraits/women/44.jpg"
226+
alt="profile"
227+
className={styles.commentProfilePic}
228+
/>
229+
<textarea
230+
className={styles.commentInput}
231+
rows={2}
232+
placeholder="Write a comment..."
233+
value={commentInput}
234+
onChange={e => setCommentInput(e.target.value)}
235+
/>
236+
<button className={styles.postBtn} onClick={handlePostComment}>
237+
Post
238+
</button>
239+
</div>
240+
<div className={styles.commentsList}>
241+
{comments.map(comment => (
242+
<div key={comment.id} className={styles.commentItem}>
243+
<div className={styles.commentTopRow}>
244+
<img
245+
src={comment.profilePic}
246+
alt="profile"
247+
className={styles.commentProfilePic}
248+
/>
249+
<span className={styles.commentName}>{comment.name}</span>
250+
<span className={styles.commentTimestamp}>{comment.timestamp}</span>
251+
<span className={styles.commentVisibility}>{comment.visibility}</span>
252+
</div>
253+
<div className={styles.commentText}>{comment.text}</div>
254+
<div className={styles.commentActionsRow}>
255+
<button className={styles.upvoteBtn}>
256+
<span style={{ fontSize: '1.1em' }}>↑</span>
257+
</button>
258+
<button className={styles.downvoteBtn}>
259+
<span style={{ fontSize: '1.1em' }}>↓</span>
260+
</button>
261+
<button className={styles.replyBtn}>
262+
<span style={{ fontSize: '1.1em' }}>💬</span>
263+
</button>
264+
</div>
265+
</div>
266+
))}
267+
</div>
268+
<button className={styles.loadMoreBtn}>Load More</button>
269+
</div>
270+
)}
271+
272+
{/* Feedback Section */}
273+
{commentTab === 'Feedback' && (
274+
<div style={{ padding: '32px', color: '#888' }}>Feedback section coming soon.</div>
275+
)}
276+
</div>
277+
)}
278+
</div>
279+
);
280+
}
281+
282+
export default ActivityComments;

0 commit comments

Comments
 (0)