Skip to content

Commit 2f40a5f

Browse files
IkkiOceanIkkiOcean
committed
alumni-page-rewamp
1 parent eef01fe commit 2f40a5f

File tree

4 files changed

+202
-48
lines changed

4 files changed

+202
-48
lines changed

‎client/src/components/OurAlumni.jsx‎

Lines changed: 75 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,85 @@
1-
import React from "react";
2-
import UserCards from "./UserCards";
1+
import React, { useState } from "react";
2+
import UserCard from "./UserCards";
3+
import Search from "./Search";
34

45
const OurAlumni = () => {
6+
const users = [
7+
{
8+
name: "AbhiShek Rao",
9+
email: "abhi@example.com",
10+
avatar: "https://i.postimg.cc/q7HVzS6f/Abhi.jpg",
11+
city: "Gorakhpur",
12+
role: "Web Developer",
13+
passOut: "MCA 2025",
14+
skills: ["JavaScript", "React", "Node.js"],
15+
bio: "Passionate web developer with a love for building interactive applications.",
16+
worksAt: "TechSoft Pvt. Ltd.",
17+
},
18+
{
19+
name: "Sita Sharma",
20+
email: "sita@example.com",
21+
avatar: "https://i.postimg.cc/q7HVzS6f/Abhi.jpg",
22+
city: "Lucknow",
23+
role: "Data Scientist",
24+
passOut: "MCA 2024",
25+
skills: ["Python", "Machine Learning", "Data Analysis"],
26+
bio: "Data scientist with a knack for uncovering insights from data.",
27+
worksAt: "DataMinds Corp.",
28+
},
29+
{
30+
name: "Rahul Verma",
31+
email: "rahul@example.com",
32+
avatar: "https://i.postimg.cc/q7HVzS6f/Abhi.jpg",
33+
city: "Delhi",
34+
role: "UX Designer",
35+
passOut: "MCA 2023",
36+
skills: ["Figma", "Sketch", "User Research"],
37+
bio: "Creative UX designer focused on enhancing user experiences.",
38+
worksAt: "DesignHub",
39+
},
40+
];
41+
42+
43+
const [filteredUsers, setFilteredUsers] = useState(users);
544

6-
const user = {
7-
name: "AbhiShek Rao",
8-
email: "johndoe@example.com",
9-
avatar: "https://i.postimg.cc/q7HVzS6f/Abhi.jpg",
10-
city: "Gorakhpur",
11-
role: "Web Developer",
12-
passOut: "MCA 2025",
45+
const handleSearch = (query, filter) => {
46+
const lowerCaseQuery = query.toLowerCase();
47+
const filtered = users.filter((user) => {
48+
if (filter === "name") {
49+
return user.name.toLowerCase().includes(lowerCaseQuery);
50+
} else if (filter === "city") {
51+
return user.city.toLowerCase().includes(lowerCaseQuery);
52+
} else if (filter === "skills") {
53+
return user.skills.some((skill) =>
54+
skill.toLowerCase().includes(lowerCaseQuery)
55+
);
56+
} else if (filter === "passOut") {
57+
return user.passOut.toLowerCase().includes(lowerCaseQuery); // Batch filter logic
58+
}
59+
return false;
60+
});
61+
setFilteredUsers(filtered);
1362
};
63+
1464

1565
return (
1666
<>
17-
<div className="container mx-auto px-4">
18-
<div className="flex flex-wrap -mx-4" style={{marginTop:"10vh"}}>
19-
<div className="w-full md:w-1/2 xl:w-1/3 p
20-
x-4 mb-8">
21-
<UserCards user={user} />
22-
</div>
23-
<div className="w-full md:w-1/2 xl:w-1/3 px-4 mb-8">
24-
<UserCards user={user} />
25-
</div>
26-
<div className="w-full md:w-1/2 xl:w-1/3 px-4 mb-8">
27-
<UserCards user={user} />
28-
29-
</div>
30-
</div>
31-
32-
</div>
33-
</>
34-
67+
<div className="container mx-auto px-4" style={{ marginTop: "5vh" }}>
68+
<h1 className="text-3xl font-bold text-center mb-4">Our Alumni</h1>
69+
<Search onSearch={handleSearch} />
70+
<div className="flex flex-wrap -mx-4">
71+
{filteredUsers.length > 0 ? (
72+
filteredUsers.map((user, index) => (
73+
<div className="w-full md:w-1/2 xl:w-1/3 px-4 mb-8" key={index}>
74+
<UserCard user={user} />
75+
</div>
76+
))
77+
) : (
78+
<p className="text-center w-full">No alumni found.</p>
79+
)}
80+
</div>
81+
</div>
82+
</>
3583
);
3684
};
3785

‎client/src/components/Search.jsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import React, { useState } from "react";
2+
3+
const Search = ({ onSearch }) => {
4+
const [query, setQuery] = useState("");
5+
const [filter, setFilter] = useState("name");
6+
7+
const handleQueryChange = (e) => {
8+
setQuery(e.target.value);
9+
onSearch(e.target.value, filter);
10+
};
11+
12+
const handleFilterChange = (e) => {
13+
setFilter(e.target.value);
14+
onSearch(query, e.target.value);
15+
};
16+
17+
return (
18+
<div className="flex justify-center mb-6">
19+
<input
20+
type="text"
21+
placeholder="Search alumni..."
22+
value={query}
23+
onChange={handleQueryChange}
24+
className="border w-full max-w-xl border-gray-300 p-2 rounded-l"
25+
/>
26+
<select
27+
value={filter}
28+
onChange={handleFilterChange}
29+
className="border border-gray-300 p-2 rounded-r"
30+
>
31+
<option value="name">Name</option>
32+
<option value="city">City</option>
33+
<option value="skills">Skills</option>
34+
<option value="passOut">Batch</option>
35+
</select>
36+
</div>
37+
);
38+
};
39+
40+
export default Search;

‎client/src/components/SocialMedia.jsx‎

Lines changed: 55 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,61 @@ import React from "react";
22

33
const SocialMedia = ({ user }) => {
44
return (
5-
<div className="bg-white w-full h-10 py-8 flex items-center justify-center gap-2 flex-wrap">
5+
<div className="bg-white w-full h-10 py-4 flex items-center justify-center gap-2 flex-wrap">
6+
{/* Email Button */}
7+
<a
8+
href={`mailto:${user.email}`} // Add the user's email to the mailto link
9+
className="w-10 h-10 flex items-center justify-center rounded-lg bg-white shadow-md shadow-gray-200 group transition-all duration-300"
10+
aria-label="Email"
11+
>
12+
<svg
13+
className="rounded-md transition-all duration-300 group-hover:scale-110"
14+
xmlns="http://www.w3.org/2000/svg"
15+
viewBox="0 0 48 48"
16+
width="28px"
17+
height="28px"
18+
>
19+
<path
20+
fill="#4caf50"
21+
d="M45,16.2l-5,2.75l-5,4.75L35,40h7c1.657,0,3-1.343,3-3V16.2z"
22+
/>
23+
<path
24+
fill="#1e88e5"
25+
d="M3,16.2l3.614,1.71L13,23.7V40H6c-1.657,0-3-1.343-3-3V16.2z"
26+
/>
27+
<polygon
28+
fill="#e53935"
29+
points="35,11.2 24,19.45 13,11.2 12,17 13,23.7 24,31.95 35,23.7 36,17"
30+
/>
31+
<path
32+
fill="#c62828"
33+
d="M3,12.298V16.2l10,7.5V11.2L9.876,8.859C9.132,8.301,8.228,8,7.298,8h0C4.924,8,3,9.924,3,12.298z"
34+
/>
35+
<path
36+
fill="#fbc02d"
37+
d="M45,12.298V16.2l-10,7.5V11.2l3.124-2.341C38.868,8.301,39.772,8,40.702,8h0 C43.076,8,45,9.924,45,12.298z"
38+
/>
39+
</svg>
40+
</a>
41+
42+
{/* LinkedIn Button */}
43+
<button className="w-10 h-10 flex items-center justify-center rounded-lg bg-white shadow-md shadow-gray-200 group transition-all duration-300">
44+
<svg
45+
className="rounded-md transition-all duration-300 group-hover:scale-110"
46+
xmlns="http://www.w3.org/2000/svg"
47+
x="0px"
48+
y="0px"
49+
width="60"
50+
height="30"
51+
viewBox="0 0 30 30"
52+
>
53+
<path d="M15,3C8.373,3,3,8.373,3,15c0,5.623,3.872,10.328,9.092,11.63C12.036,26.468,12,26.28,12,26.047v-2.051 c-0.487,0-1.303,0-1.508,0c-0.821,0-1.551-0.353-1.905-1.009c-0.393-0.729-0.461-1.844-1.435-2.526 c-0.289-0.227-0.069-0.486,0.264-0.451c0.615,0.174,1.125,0.596,1.605,1.222c0.478,0.627,0.703,0.769,1.596,0.769 c0.433,0,1.081-0.025,1.691-0.121c0.328-0.833,0.895-1.6,1.588-1.962c-3.996-0.411-5.903-2.399-5.903-5.098 c0-1.162,0.495-2.286,1.336-3.233C9.053,10.647,8.706,8.73,9.435,8c1.798,0,2.885,1.166,3.146,1.481C13.477,9.174,14.461,9,15.495,9 c1.036,0,2.024,0.174,2.922,0.483C18.675,9.17,19.763,8,21.565,8c0.732,0.731,0.381,2.656,0.102,3.594 c0.836,0.945,1.328,2.066,1.328,3.226c0,2.697-1.904,4.684-5.894,5.097C18.199,20.49,19,22.1,19,23.313v2.734 c0,0.104-0.023,0.179-0.035,0.268C23.641,24.676,27,20.236,27,15C27,8.373,21.627,3,15,3z"></path>
54+
</svg>
55+
</button>
56+
57+
{/* Add additional social media buttons as needed */}
58+
59+
{/* Example for another social media button */}
660
<button className="w-10 h-10 flex items-center justify-center rounded-lg bg-white shadow-md shadow-gray-200 group transition-all duration-300">
761
<svg
862
className="rounded-md transition-all duration-300 group-hover:scale-110"
@@ -20,12 +74,6 @@ const SocialMedia = ({ user }) => {
2074
/>
2175
</svg>
2276
</button>
23-
24-
<button className="w-10 h-10 flex items-center justify-center rounded-lg bg-white shadow-md shadow-gray-200 group transition-all duration-300">
25-
<svg className="rounded-md transition-all duration-300 group-hover:scale-110" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="60" height="30" viewBox="0 0 30 30">
26-
<path d="M15,3C8.373,3,3,8.373,3,15c0,5.623,3.872,10.328,9.092,11.63C12.036,26.468,12,26.28,12,26.047v-2.051 c-0.487,0-1.303,0-1.508,0c-0.821,0-1.551-0.353-1.905-1.009c-0.393-0.729-0.461-1.844-1.435-2.526 c-0.289-0.227-0.069-0.486,0.264-0.451c0.615,0.174,1.125,0.596,1.605,1.222c0.478,0.627,0.703,0.769,1.596,0.769 c0.433,0,1.081-0.025,1.691-0.121c0.328-0.833,0.895-1.6,1.588-1.962c-3.996-0.411-5.903-2.399-5.903-5.098 c0-1.162,0.495-2.286,1.336-3.233C9.053,10.647,8.706,8.73,9.435,8c1.798,0,2.885,1.166,3.146,1.481C13.477,9.174,14.461,9,15.495,9 c1.036,0,2.024,0.174,2.922,0.483C18.675,9.17,19.763,8,21.565,8c0.732,0.731,0.381,2.656,0.102,3.594 c0.836,0.945,1.328,2.066,1.328,3.226c0,2.697-1.904,4.684-5.894,5.097C18.199,20.49,19,22.1,19,23.313v2.734 c0,0.104-0.023,0.179-0.035,0.268C23.641,24.676,27,20.236,27,15C27,8.373,21.627,3,15,3z"></path>
27-
</svg>
28-
</button>
2977
</div>
3078
);
3179
};

‎client/src/components/UserCards.jsx‎

Lines changed: 32 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,28 +3,46 @@ import SocialMedia from './SocialMedia';
33

44
const UserCard = ({ user }) => {
55
return (
6-
<div className="max-w-sm mx-auto pr-14 pl-14 bg-white shadow-lg rounded-lg overflow-hidden transition ease-in-out hover:scale-105 ">
7-
<div className="flex justify-center mt-2 ">
6+
<div className="max-w-sm mx-auto bg-white shadow-lg rounded-lg overflow-hidden transition-transform transform duration-300 hover:scale-105 p-5">
7+
<div className="flex flex-col items-center">
88
<img
99
className="h-32 w-32 rounded-full border-4 border-indigo-500"
1010
src={user.avatar}
1111
alt={`${user.name} avatar`}
1212
/>
13+
<h2 className="text-xl font-semibold text-gray-800 mt-2">{user.name}</h2>
14+
<h3 className="text-md text-gray-600">{user.role}</h3>
15+
<p className="text-sm text-gray-500">{user.city} | {user.passOut}</p>
1316
</div>
14-
<div className="text-center mt-3">
15-
<h2 className="text-xl font-semibold text-gray-800">{user.name}</h2>
16-
<h3 className="text-l font-regular text-black-200">{user.city}</h3>
17-
<h3 className="text-l font-regular text-black-200">{user.role}</h3>
18-
<h3 className="text-l font-regular text-black-200">{user.passOut}</h3>
1917

20-
<SocialMedia/>
18+
<div className="mt-1">
19+
<div className="flex flex-wrap justify-center mt-1">
20+
{user.skills.map(skill => (
21+
<span
22+
key={skill}
23+
className="bg-indigo-100 text-indigo-700 text-xs font-medium mr-1 mb-1 px-2.5 py-0.5 rounded-full"
24+
>
25+
{skill}
26+
</span>
27+
))}
28+
</div>
2129

22-
{/* <p className="text-gray-600">{user.email}</p> */}
23-
</div>
24-
<div className="flex justify-center mt-4 mb-4">
25-
<button className="text-white bg-indigo-500 hover:bg-indigo-400 px-4 py-2 rounded-full">
26-
View Profile
27-
</button>
30+
<p className="text-xs text-gray-500 mt-2 text-center">{user.bio}</p>
31+
{user.worksAt && (
32+
<p className="text-xs text-gray-500 text-center">
33+
Currently at: <span className="text-indigo-600 cursor-pointer">{user.worksAt}</span>
34+
</p>
35+
)}
36+
{/* Add Social Media Section */}
37+
<div className="">
38+
<SocialMedia user={user} />
39+
</div>
40+
41+
<div className="flex justify-center mt-5">
42+
<button className="text-white bg-indigo-600 hover:bg-indigo-500 px-4 py-2 rounded-full text-sm">
43+
View Profile
44+
</button>
45+
</div>
2846
</div>
2947
</div>
3048
);

0 commit comments

Comments
 (0)