Skip to content

Commit b5e603b

Browse files
YemyamYemyam
committed
Added alumni section + tabs, presidents WIP
1 parent a691102 commit b5e603b

File tree

4 files changed

+231
-0
lines changed

4 files changed

+231
-0
lines changed

‎components/AlumniSection.jsx

Lines changed: 162 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,162 @@
1+
import Team from './Team';
2+
import { fetchContent } from '../api/apiRoot';
3+
import { useState, useEffect } from 'react';
4+
import { Tabs, TabsHeader, TabsBody, Tab, TabPanel } from '@material-tailwind/react';
5+
import Heading from './Heading';
6+
import { UnderlineTypes } from '../utils/underlineType';
7+
import CoPresident from "./CoPresident";
8+
9+
const people = [{
10+
name: "John Doe",
11+
linkedin: "randomlink.com",
12+
position: "Dev",
13+
project: "Events",
14+
pfp: {
15+
fields: {
16+
file: {
17+
url: "//t3.ftcdn.net/jpg/05/16/27/58/360_F_516275801_f3Fsp17x6HQK0xQgDQEELoTuERO4SsWV.jpg"
18+
}
19+
}
20+
},
21+
classes: "text-white",
22+
},
23+
{
24+
name: "John Doe",
25+
linkedin: "randomlink.com",
26+
position: "Dev",
27+
project: "Events",
28+
pfp: {
29+
fields: {
30+
file: {
31+
url: "//t3.ftcdn.net/jpg/05/16/27/58/360_F_516275801_f3Fsp17x6HQK0xQgDQEELoTuERO4SsWV.jpg"
32+
}
33+
}
34+
},
35+
classes: "text-white",
36+
},
37+
{
38+
name: "John Doe",
39+
linkedin: "randomlink.com",
40+
position: "Dev",
41+
project: "Events",
42+
pfp: {
43+
fields: {
44+
file: {
45+
url: "//t3.ftcdn.net/jpg/05/16/27/58/360_F_516275801_f3Fsp17x6HQK0xQgDQEELoTuERO4SsWV.jpg"
46+
}
47+
}
48+
},
49+
classes: "text-white",
50+
},
51+
{
52+
name: "John Doe",
53+
linkedin: "randomlink.com",
54+
position: "Dev",
55+
project: "Events",
56+
pfp: {
57+
fields: {
58+
file: {
59+
url: "//t3.ftcdn.net/jpg/05/16/27/58/360_F_516275801_f3Fsp17x6HQK0xQgDQEELoTuERO4SsWV.jpg"
60+
}
61+
}
62+
},
63+
classes: "text-white",
64+
},
65+
66+
{
67+
name: "John Doe",
68+
linkedin: "randomlink.com",
69+
position: "Dev",
70+
project: "Events",
71+
pfp: {
72+
fields: {
73+
file: {
74+
url: "//t3.ftcdn.net/jpg/05/16/27/58/360_F_516275801_f3Fsp17x6HQK0xQgDQEELoTuERO4SsWV.jpg"
75+
}
76+
}
77+
},
78+
classes: "text-white",
79+
},
80+
{
81+
name: "John Doe",
82+
linkedin: "randomlink.com",
83+
position: "Dev",
84+
project: "Events",
85+
pfp: {
86+
fields: {
87+
file: {
88+
url: "//t3.ftcdn.net/jpg/05/16/27/58/360_F_516275801_f3Fsp17x6HQK0xQgDQEELoTuERO4SsWV.jpg"
89+
}
90+
}
91+
},
92+
classes: "text-white",
93+
},
94+
{
95+
name: "John Doe",
96+
linkedin: "randomlink.com",
97+
position: "Dev",
98+
project: "Events",
99+
pfp: {
100+
fields: {
101+
file: {
102+
url: "//t3.ftcdn.net/jpg/05/16/27/58/360_F_516275801_f3Fsp17x6HQK0xQgDQEELoTuERO4SsWV.jpg"
103+
}
104+
}
105+
},
106+
classes: "text-white",
107+
},
108+
];
109+
110+
const TechnicalTeam = () => {
111+
const [executives, setExecutives] = useState([]);
112+
const [projects, setProjects] = useState([]);
113+
const [activeTab, setActiveTab] = useState('');
114+
115+
useEffect(() => {
116+
fetchContent('technicalTeam').then((data) => {
117+
setExecutives(people);
118+
119+
const uniqueProjects = data.map((exec) => exec.project).filter((pos, index, self) => self.indexOf(pos) === index);
120+
setProjects(["Presidents", "Events", "Finance", "Marketing", "Tech"]);
121+
122+
if (uniqueProjects.length > 0) {
123+
setActiveTab(uniqueProjects[0]);
124+
}
125+
});
126+
}, []);
127+
128+
return (
129+
<section className="bg-[#7055FD] p-12 h-screen">
130+
<div className="mb-9">
131+
<Heading underlineType={UnderlineTypes.GREEN_SHORT_UNDERLINE} classes={"text-white"}>Alumni</Heading>
132+
</div>
133+
<div>
134+
{projects.length > 0 && (
135+
<Tabs value={activeTab} onChange={(val) => setActiveTab(val)}>
136+
<TabsHeader className="flex flex-row justify-center">
137+
{projects.map((project) => (
138+
<Tab className="alumni-tab rounded-full p-1 font-medium" key={project} value={project}>
139+
{project}
140+
</Tab>
141+
))}
142+
</TabsHeader>
143+
<TabsBody>
144+
{projects.map((project) => (
145+
<TabPanel key={project} value={project}>
146+
{project === "Presidents" ? (
147+
<div className="text-white text-center text-xl font-semibold flex justify-center">
148+
<CoPresident />
149+
</div>) : (
150+
<Team executives={executives.filter((exec) => exec.project === project)} />
151+
)}
152+
</TabPanel>
153+
))}
154+
</TabsBody>
155+
</Tabs>
156+
)}
157+
</div>
158+
</section>
159+
);
160+
};
161+
162+
export default TechnicalTeam;

‎components/CoPresident.jsx

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import React from 'react';
2+
import { SwiperSlide } from 'swiper/react';
3+
import Carousel from './Carousel';
4+
import 'swiper/css';
5+
import 'swiper/css/navigation';
6+
import Avatar from './Avatar';
7+
const CAROUSEL_CONTAINER = 'text-white rounded-lg w-[20rem] h-[30rem] shadow-2xl md:w-4/5 swiper-button-white';
8+
const ALUMNI_TILE =
9+
'bg-[#A689FF] bg-opacity-50 w-[20rem] h-[70rem] md:h-[30rem] rounded-lg items-center p-14 lg:p-10 flex flex-col shadow-2xl md:w-full md:flex-row';
10+
11+
const President = [{
12+
name: "Nathan Pham",
13+
position: "Co-Pres",
14+
previousRole: "Events team",
15+
testimonial: "Wow I love this club",
16+
linkedin: "random link",
17+
pfp: {
18+
fields: {
19+
file: {
20+
url: "//t3.ftcdn.net/jpg/05/16/27/58/360_F_516275801_f3Fsp17x6HQK0xQgDQEELoTuERO4SsWV.jpg"
21+
}
22+
}
23+
},
24+
classes: "text-[#7055FD]",
25+
}];
26+
27+
const AlumniTile = ({ name, linkedin, pfp, classes, testimonial }) => {
28+
return (
29+
<div className={ALUMNI_TILE}>
30+
<Avatar key={name} {...{name, linkedin, pfp, classes}}></Avatar>
31+
<p className="text-[1.1rem] font-light italic leading-7 mx-auto md:ml-14 md:mb-24 md:text-[1.3rem] lg:text-[1.5rem] md:p-10 text-[#000000]">
32+
<span className="text-[2rem] font-extrabold">&quot;</span>
33+
{testimonial}
34+
<span className="text-[2rem] font-extrabold">&quot;</span>
35+
</p>
36+
</div>
37+
);
38+
};
39+
40+
const CoPresident = () => {
41+
return (
42+
<div className='bg-white w-full h-[40rem] flex justify-center items-center'>
43+
<div className={CAROUSEL_CONTAINER}>
44+
<Carousel>
45+
{President.map((president) => (
46+
<SwiperSlide key={president.name}>
47+
<AlumniTile {...president} />
48+
</SwiperSlide>
49+
))}
50+
</Carousel>
51+
</div>
52+
</div>
53+
);
54+
};
55+
export default CoPresident;
56+

‎pages/our-team/index.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
11
import UnderConstruction from '../../components/UnderConstruction';
2+
import AlumniSection from '../../components/AlumniSection';
3+
import TechnicalTeam from '../../components/TechnicalTeam';
24

35
const OurTeam = () => {
46
return (
57
<div>
68
{/* <MeetOurTeam />
79
<InternalTeam />
810
<TechnicalTeam /> */}
11+
<AlumniSection />
12+
<TechnicalTeam />
913
<UnderConstruction />
1014
</div>
1115
);

‎styles/globals.css

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,15 @@
2626
color: white;
2727
}
2828

29+
.alumni-tab {
30+
max-width: 200px;
31+
}
32+
33+
.alumni-tab:hover {
34+
background-color: #00D3A9;
35+
color: white;
36+
}
37+
2938
.technical-section {
3039
background-color: #bcfbe4;
3140
}

0 commit comments

Comments
 (0)