Skip to content

Commit 18b008b

Browse files
derekxu04derekxu04
committed
Merge branch 'master' into CW2-31-refactor-code
2 parents 31d76a0 + 8b63ebc commit 18b008b

File tree

3 files changed

+124
-19
lines changed

3 files changed

+124
-19
lines changed

‎frontend/public/assets/devsoc_logo.svg‎

Lines changed: 50 additions & 0 deletions
Loading

‎frontend/src/pages/about/our-history.tsx‎

Lines changed: 35 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,15 @@
11
import Layout from "@/components/Layout";
22
import PageBody from "@/components/PageBody";
33
import PageTitle from "@/components/PageTitle";
4+
import { useState } from "react";
5+
6+
const MIN_YEAR = 2007;
7+
const MAX_YEAR = 2020;
8+
const DEFAULT_YEAR = 2020;
49

510
const OurHistoryPage = () => {
6-
// Years from 2020 to 2007
7-
const years: number[] = Array.from({ length: 14 }, (_, i) => 2020 - i);
11+
const [year, setYear] = useState(DEFAULT_YEAR);
12+
const [shouldDisplayTip, setShouldDisplayTip] = useState(true);
813

914
return (
1015
<Layout>
@@ -39,14 +44,35 @@ const OurHistoryPage = () => {
3944

4045
<div className="border-t border-gray-300 my-5"></div>
4146

42-
{years.map((year: number) => (
43-
<div key={year} className="mb-4">
44-
<div className="flex flex-col items-center mb-5">
45-
<h2 className="text-2xl font-semibold mb-2">{year}</h2>
46-
<img src={`/images/csesoc-team-${year}.png`} alt={`CSESoc Team ${year}`} height={600} width={600}/>
47-
</div>
47+
<div className="flex flex-col items-center mt-5">
48+
<h2 className="text-4xl font-semibold mb-5">{year}</h2>
49+
50+
<input
51+
id="history-year-slider"
52+
type="range"
53+
min={MIN_YEAR}
54+
max={MAX_YEAR}
55+
defaultValue={DEFAULT_YEAR}
56+
step={1}
57+
className="w-full h-2 bg-blue-300 rounded-lg appearance-none cursor-pointer"
58+
onChange={(e) => {
59+
setYear(parseInt(e.target.value))
60+
setShouldDisplayTip(false)
61+
}}
62+
/>
63+
<div className="flex flex-row w-full justify-between mt-1">
64+
<p>{MIN_YEAR}</p>
65+
<p>{MAX_YEAR}</p>
66+
</div>
67+
68+
{shouldDisplayTip && (
69+
<p className="mt-5">Use the slider to see the teams from past years!</p>
70+
)}
71+
72+
<div key={year} className="h-[600px] w-[600px] mt-10">
73+
<img src={`/images/csesoc-team-${year}.png`} alt={`CSESoc Team ${year}`}/>
4874
</div>
49-
))}
75+
</div>
5076
</PageBody>
5177
</Layout>
5278
);

‎frontend/src/pages/resources.tsx‎

Lines changed: 39 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -16,23 +16,35 @@ export default function ResourcesPage() {
1616
<div className="relative">
1717
<Image src="assets/resources_bg.svg" alt="Background" className="-z-50 absolute" fill />
1818

19+
<div className="flex">
20+
<span className="text-lg">Made by</span>
21+
<Image
22+
src="/assets/csesoc_logo.svg"
23+
alt="CSESoc Logo"
24+
width={100}
25+
height={100}
26+
className="pl-2"
27+
/>
28+
</div>
29+
1930
<div className="py-8 bg-no-repeat bg-center">
2031
<div className="grid grid-cols-4 1 gap-x-9 gap-y-5">
21-
{stage1.map((item: resourceCards) => {
32+
{stage3.map((item: resourceCards) => {
2233
return (
2334
<a
2435
key={item.id}
2536
href={item.href}
2637
target="_blank"
27-
className={`col-span-4 p-5 ${boxStyling} flex`}
38+
className={`md:col-span-2 col-span-4 p-5 ${boxStyling} flex`}
2839
>
29-
<div className="flex justify-center align-middle items-center pl-2 pr-10">
40+
<div className="flex align-middle items-center pt-2 pb-4 pr-10">
3041
<Image
3142
src={item.svg}
3243
alt={item.alt}
3344
draggable="false"
3445
width={item.width}
3546
height={item.height}
47+
className="rounded-md"
3648
/>
3749
</div>
3850
<div>
@@ -42,16 +54,34 @@ export default function ResourcesPage() {
4254
</a>
4355
);
4456
})}
57+
</div>
58+
</div>
4559

46-
{stage2.map((item: resourceCards) => {
60+
<a href="https://devsoc.app/" target="_blank" rel="noopener noreferrer">
61+
<div
62+
className={`flex grow-on-hover cursor-pointer transform transition-transform duration-300 hover:scale-105`}
63+
>
64+
<span className="text-lg">Made by</span>
65+
<Image
66+
src="/assets/devsoc_logo.svg"
67+
alt="DevSoc Logo"
68+
width={110}
69+
height={110}
70+
className="pl-1"
71+
/>
72+
</div>
73+
</a>
74+
<div className="py-8 bg-no-repeat bg-center">
75+
<div className="grid grid-cols-4 1 gap-x-9 gap-y-5">
76+
{stage1.map((item: resourceCards) => {
4777
return (
4878
<a
4979
key={item.id}
5080
href={item.href}
5181
target="_blank"
52-
className={`xl:col-span-1 col-span-4 p-5 ${boxStyling}`}
82+
className={`col-span-4 p-5 ${boxStyling} flex`}
5383
>
54-
<div className="flex align-middle items-center pt-2 pb-4">
84+
<div className="flex justify-center align-middle items-center pl-2 pr-10">
5585
<Image
5686
src={item.svg}
5787
alt={item.alt}
@@ -68,22 +98,21 @@ export default function ResourcesPage() {
6898
);
6999
})}
70100

71-
{stage3.map((item: resourceCards) => {
101+
{stage2.map((item: resourceCards) => {
72102
return (
73103
<a
74104
key={item.id}
75105
href={item.href}
76106
target="_blank"
77-
className={`md:col-span-2 col-span-4 p-5 ${boxStyling} flex`}
107+
className={`xl:col-span-1 col-span-4 p-5 ${boxStyling}`}
78108
>
79-
<div className="flex align-middle items-center pt-2 pb-4 pr-10">
109+
<div className="flex align-middle items-center pt-2 pb-4">
80110
<Image
81111
src={item.svg}
82112
alt={item.alt}
83113
draggable="false"
84114
width={item.width}
85115
height={item.height}
86-
className="rounded-md"
87116
/>
88117
</div>
89118
<div>

0 commit comments

Comments
 (0)