Skip to content

Commit c0205b1

Browse files
Neeraj-KondaveetiNeeraj-Kondaveeti
committed
Added Search Events Filter under Search Filter tab + made logic changes and converted CPDashboard.css to .module.css
1 parent 71f7e10 commit c0205b1

3 files changed

Lines changed: 327 additions & 208 deletions

File tree

‎src/components/CommunityPortal/CPDashboard.css‎

Lines changed: 0 additions & 156 deletions
This file was deleted.

‎src/components/CommunityPortal/CPDashboard.jsx‎

Lines changed: 72 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useState, useEffect } from 'react';
22
import { Container, Row, Col, Card, CardBody, Button, Input } from 'reactstrap';
3-
import './CPDashboard.css';
43
import { FaCalendarAlt, FaMapMarkerAlt, FaUserAlt } from 'react-icons/fa';
4+
import styles from './CPDashboard.module.css';
55

66
export function CPDashboard() {
77
const [events, setEvents] = useState([]);
@@ -37,69 +37,89 @@ export function CPDashboard() {
3737
setEvents(mockEvents);
3838
}, []);
3939

40+
const filteredEvents = events.filter(event => {
41+
const keyword = search.trim().toLowerCase();
42+
if (!keyword) return true;
43+
return (
44+
event.title.toLowerCase().includes(keyword) ||
45+
event.location.toLowerCase().includes(keyword) ||
46+
event.organizer.toLowerCase().includes(keyword)
47+
);
48+
});
49+
4050
return (
41-
<Container fluid className="dashboard-container">
42-
<header className="dashboard-header">
51+
<Container fluid className={styles.dashboardContainer}>
52+
<header className={styles.dashboardHeader}>
4353
<h1>All Events</h1>
44-
<div className="dashboard-controls">
45-
<div className="dashboard-search-container">
54+
<div className={styles.dashboardControls}>
55+
<div className={styles.dashboardSearchContainer}>
4656
<Input
4757
type="search"
48-
placeholder="Search events..."
58+
placeholder="Search..."
4959
value={search}
5060
onChange={e => setSearch(e.target.value)}
51-
className="dashboard-search"
61+
className={styles.dashboardSearch}
5262
/>
5363
</div>
54-
{/* <Dropdown isOpen={dropdownOpen} toggle={toggleDropdown} className="community-dropdown">
55-
<DropdownToggle caret color="secondary">
56-
Community Portal
57-
</DropdownToggle>
58-
<DropdownMenu>
59-
<DropdownItem onClick={() => handleNavigation('/home')}>Home</DropdownItem>
60-
<DropdownItem onClick={() => handleNavigation('/events')}>Events</DropdownItem>
61-
<DropdownItem onClick={() => handleNavigation('/about')}>About Us</DropdownItem>
62-
<DropdownItem onClick={() => handleNavigation('/contact')}>Contact</DropdownItem>
63-
</DropdownMenu>
64-
</Dropdown> */}
6564
</div>
6665
</header>
6766

6867
<Row>
69-
<Col md={3} className="dashboard-sidebar">
70-
<div className="filter-section">
68+
<Col md={3} className={styles.dashboardSidebar}>
69+
<div className={styles.filterSection}>
7170
<h4>Search Filters</h4>
72-
<div className="filter-item">
73-
<label htmlFor="date-tomorrow"> Dates</label>
74-
<div className="filter-options-horizontal">
75-
<div>
76-
<Input type="radio" name="dates" /> Tomorrow
77-
</div>
78-
<div>
79-
<Input type="radio" name="dates" /> This Weekend
80-
</div>
71+
72+
<div className={`${styles.filterItem} ${styles.searchFilter}`}>
73+
<label htmlFor="search-events">Search Events</label>
74+
<div className={styles.inputGroup}>
75+
<span className={styles.inputGroupText}>
76+
<i className="fa fa-search" aria-hidden="true"></i>
77+
</span>
78+
<input
79+
type="text"
80+
id="search-events"
81+
placeholder="Search Events"
82+
value={search}
83+
onChange={e => setSearch(e.target.value)}
84+
/>
85+
</div>
86+
</div>
87+
88+
<div className={styles.filterItem}>
89+
<label htmlFor="date-tomorrow">Dates</label>
90+
<div className={styles.filterOptionsVertical}>
91+
<label className={styles.radioOption}>
92+
<input type="radio" name="dates" /> Tomorrow
93+
</label>
94+
<label className={styles.radioOption}>
95+
<input type="radio" name="dates" /> This Weekend
96+
</label>
8197
</div>
82-
<Input type="date" placeholder="Ending After" className="date-filter" />
98+
<Input type="date" placeholder="Ending After" className={styles.dateFilter} />
8399
</div>
84-
<div className="filter-item">
100+
101+
<div className={styles.filterItem}>
85102
<label htmlFor="online-only">Online</label>
86103
<div>
87104
<Input type="checkbox" /> Online Only
88105
</div>
89106
</div>
90-
<div className="filter-item">
107+
108+
<div className={styles.filterItem}>
91109
<label htmlFor="branches">Branches</label>
92110
<Input type="select">
93111
<option>Select branches</option>
94112
</Input>
95113
</div>
96-
<div className="filter-item">
114+
115+
<div className={styles.filterItem}>
97116
<label htmlFor="themes">Themes</label>
98117
<Input type="select">
99118
<option>Select themes</option>
100119
</Input>
101120
</div>
102-
<div className="filter-item">
121+
122+
<div className={styles.filterItem}>
103123
<label htmlFor="categories">Categories</label>
104124
<Input type="select">
105125
<option>Select categories</option>
@@ -108,37 +128,37 @@ export function CPDashboard() {
108128
</div>
109129
</Col>
110130

111-
<Col md={9} className="dashboard-main">
112-
<h2 className="section-title">Events</h2>
131+
<Col md={9} className={styles.dashboardMain}>
132+
<h2 className={styles.sectionTitle}>Events</h2>
113133
<Row>
114-
{events.length > 0 ? (
115-
events.map(event => (
116-
<Col md={4} key={event.id} className="event-card-col">
117-
<Card className="event-card">
118-
<div className="event-card-img-container">
119-
<img src={event.image} alt={event.title} className="event-card-img" />
134+
{filteredEvents.length > 0 ? (
135+
filteredEvents.map(event => (
136+
<Col md={4} key={event.id} className={styles.eventCardCol}>
137+
<Card className={styles.eventCard}>
138+
<div className={styles.eventCardImgContainer}>
139+
<img src={event.image} alt={event.title} className={styles.eventCardImg} />
120140
</div>
121141
<CardBody>
122-
<h5 className="event-title">{event.title}</h5>
123-
<p className="event-date">
124-
<FaCalendarAlt className="event-icon" /> {event.date}
142+
<h5 className={styles.eventTitle}>{event.title}</h5>
143+
<p className={styles.eventDate}>
144+
<FaCalendarAlt className={styles.eventIcon} /> {event.date}
125145
</p>
126-
<p className="event-location">
127-
<FaMapMarkerAlt className="event-icon" /> {event.location}
146+
<p className={styles.eventLocation}>
147+
<FaMapMarkerAlt className={styles.eventIcon} /> {event.location}
128148
</p>
129-
<p className="event-organizer">
130-
<FaUserAlt className="event-icon" /> {event.organizer}
149+
<p className={styles.eventOrganizer}>
150+
<FaUserAlt className={styles.eventIcon} /> {event.organizer}
131151
</p>
132152
</CardBody>
133153
</Card>
134154
</Col>
135155
))
136156
) : (
137-
<div className="no-events">No events available</div>
157+
<div className={styles.noEvents}>No events available</div>
138158
)}
139159
</Row>
140-
<div className="dashboard-actions">
141-
<Button color="primary">Show Past Events</Button>
160+
<div className={styles.dashboardActions}>
161+
<Button className={styles.showPastEventsBtn}>Show Past Events</Button>
142162
</div>
143163
</Col>
144164
</Row>

0 commit comments

Comments
 (0)