Skip to content

Commit 90843af

Browse files
Jerusha547Jerusha547
committed
Added [search-bar]: search bar added to contributions page
1 parent 9d34c19 commit 90843af

1 file changed

Lines changed: 125 additions & 57 deletions

File tree

‎src/pages/Contributors/Contributors.tsx‎

Lines changed: 125 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
import { useEffect, useState } from "react";
2+
import { TextField, InputAdornment } from "@mui/material";
3+
import { FaSearch } from "react-icons/fa";
24
import {
35
Container,
46
Grid,
@@ -28,6 +30,7 @@ const ContributorsPage = () => {
2830
const [contributors, setContributors] = useState<Contributor[]>([]);
2931
const [loading, setLoading] = useState<boolean>(true);
3032
const [error, setError] = useState<string | null>(null);
33+
const [searchTerm, setSearchTerm] = useState<string>("");
3134

3235
// Fetch contributors from GitHub API
3336
useEffect(() => {
@@ -47,6 +50,10 @@ const ContributorsPage = () => {
4750
fetchContributors();
4851
}, []);
4952

53+
const filteredContributors = contributors.filter((contributor) =>
54+
contributor.login.toLowerCase().includes(searchTerm.toLowerCase()),
55+
);
56+
5057
if (loading) {
5158
return (
5259
<Box sx={{ display: "flex", justifyContent: "center", mt: 4 }}>
@@ -65,74 +72,135 @@ const ContributorsPage = () => {
6572

6673
return (
6774
<div className="bg-white dark:bg-gray-900 text-black dark:text-white min-h-screen p-4 mt-4">
68-
<Container>
75+
<Container maxWidth="lg">
6976
<Typography sx={{ pb: 2 }} variant="h4" align="center" gutterBottom>
7077
🤝 Contributors
7178
</Typography>
79+
<Box
80+
sx={{
81+
display: "flex",
82+
justifyContent: "center",
83+
mb: 4,
84+
width: "100%",
85+
}}
86+
>
87+
<TextField
88+
placeholder="Search contributors..."
89+
variant="outlined"
90+
autoFocus
91+
value={searchTerm}
92+
onChange={(e) => setSearchTerm(e.target.value)}
93+
sx={{
94+
width: {
95+
xs: "100%",
96+
sm: "400px",
97+
},
98+
maxWidth: "100%",
99+
backgroundColor: "white",
100+
borderRadius: "10px",
101+
}}
102+
InputProps={{
103+
startAdornment: (
104+
<InputAdornment position="start">
105+
<FaSearch />
106+
</InputAdornment>
107+
),
108+
}}
109+
/>
110+
</Box>
72111

73-
<Grid container spacing={4}>
74-
{contributors.map((contributor) => (
75-
<Grid item xs={12} sm={6} md={3} key={contributor.id}>
76-
<Card
77-
sx={{
78-
textAlign: "center",
79-
p: 2,
80-
borderRadius: "10px",
81-
border: "1px solid #E0E0E0",
82-
boxShadow: "0 4px 10px rgba(0,0,0,0.1)",
83-
transition: "transform 0.3s ease-in-out",
84-
"&:hover": {
85-
transform: "scale(1.05)",
86-
boxShadow: "0 8px 15px rgba(0,0,0,0.2)",
87-
borderColor: "#C0C0C0",
88-
outlineColor: "#B3B3B3",
89-
},
90-
}}
112+
<Grid container spacing={4} justifyContent="center">
113+
{filteredContributors.length === 0 && (
114+
<Typography
115+
variant="h6"
116+
align="center"
117+
sx={{
118+
mt: 4,
119+
color: "gray",
120+
fontWeight: 500,
121+
}}
122+
>
123+
No contributors found.
124+
</Typography>
125+
)}
126+
{filteredContributors.map((contributor) => (
127+
<Grid
128+
item
129+
xs={12}
130+
sm={6}
131+
md={
132+
filteredContributors.length === 1
133+
? 12
134+
: filteredContributors.length === 2
135+
? 6
136+
: filteredContributors.length === 3
137+
? 4
138+
: 3
139+
}
140+
key={contributor.id}
141+
>
142+
<Card
143+
sx={{
144+
textAlign: "center",
145+
p: 2,
146+
maxWidth: "300px",
147+
mx: "auto",
148+
borderRadius: "10px",
149+
border: "1px solid #E0E0E0",
150+
boxShadow: "0 4px 10px rgba(0,0,0,0.1)",
151+
transition: "transform 0.3s ease-in-out",
152+
"&:hover": {
153+
transform: "scale(1.05)",
154+
boxShadow: "0 8px 15px rgba(0,0,0,0.2)",
155+
borderColor: "#C0C0C0",
156+
outlineColor: "#B3B3B3",
157+
},
158+
}}
159+
>
160+
<Link
161+
to={`/contributor/${contributor.login}`}
162+
style={{ textDecoration: "none" }}
91163
>
92-
<Link
93-
to={`/contributor/${contributor.login}`}
94-
style={{ textDecoration: "none" }}
95-
>
96-
<Avatar
97-
src={contributor.avatar_url}
98-
alt={contributor.login}
99-
sx={{ width: 100, height: 100, mx: "auto", mb: 2 }}
100-
/>
101-
<CardContent>
102-
<Typography variant="h6" sx={{ fontWeight: "bold" }}>
103-
{contributor.login}
104-
</Typography>
164+
<Avatar
165+
src={contributor.avatar_url}
166+
alt={contributor.login}
167+
sx={{ width: 100, height: 100, mx: "auto", mb: 2 }}
168+
/>
169+
<CardContent>
170+
<Typography variant="h6" sx={{ fontWeight: "bold" }}>
171+
{contributor.login}
172+
</Typography>
105173

106-
<Typography variant="body2" color="text.secondary">
107-
{contributor.contributions} Contributions
108-
</Typography>
109-
{/*
174+
<Typography variant="body2" color="text.secondary">
175+
{contributor.contributions} Contributions
176+
</Typography>
177+
{/*
110178
<Typography variant="body2" sx={{ mt: 2 }}>
111179
Thank you for your valuable contributions to our
112180
community!
113181
</Typography> */}
114-
</CardContent>
115-
</Link>
182+
</CardContent>
183+
</Link>
116184

117-
<Box sx={{ mt: 2 }}>
118-
<Button
119-
variant="contained"
120-
startIcon={<FaGithub />}
121-
href={contributor.html_url}
122-
target="_blank"
123-
sx={{
124-
backgroundColor: "#333333",
125-
textTransform: "none",
126-
color: "#FFFFFF",
127-
"&:hover": {
128-
backgroundColor: "#555555",
129-
},
130-
}}
131-
>
132-
GitHub
133-
</Button>
134-
</Box>
135-
</Card>
185+
<Box sx={{ mt: 2 }}>
186+
<Button
187+
variant="contained"
188+
startIcon={<FaGithub />}
189+
href={contributor.html_url}
190+
target="_blank"
191+
sx={{
192+
backgroundColor: "#333333",
193+
textTransform: "none",
194+
color: "#FFFFFF",
195+
"&:hover": {
196+
backgroundColor: "#555555",
197+
},
198+
}}
199+
>
200+
GitHub
201+
</Button>
202+
</Box>
203+
</Card>
136204
</Grid>
137205
))}
138206
</Grid>

0 commit comments

Comments
 (0)