Skip to content

Commit 105f4e1

Browse files
derekxu04derekxu04
committed
Use layout component
1 parent cab94e2 commit 105f4e1

File tree

8 files changed

+204
-220
lines changed

8 files changed

+204
-220
lines changed

‎frontend/src/components/Layout.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import Navbar from './Navbar';
2+
import Footer from './Footer';
3+
4+
const Layout = ({ children }: { children: React.ReactNode }) => {
5+
return (
6+
<section className="flex flex-col min-h-screen justify-between py-8 xl:px-24 md:px-10 px-5 relative overflow-hidden">
7+
<Navbar />
8+
{children}
9+
<Footer />
10+
</section>
11+
);
12+
};
13+
14+
export default Layout;

‎frontend/src/components/Navbar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ const Navbar = () => {
2121
height={200}
2222
draggable={false}
2323
/>
24-
<p className="font-mono mt-3 text-s font-bold">
24+
<p className="font-mono mt-3 font-bold">
2525
<span className="text-green-500">csesoc@unsw</span>
2626
<span>:</span>
2727
<span className="text-blue-500">~{path.map(segment => '/' + segment.toLowerCase())}</span>

‎frontend/src/components/Resources/index.tsx‎

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

‎frontend/src/components/Sponsors/SponsorLinks.tsx‎

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

‎frontend/src/pages/contact-us.tsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
11
import Contacts from '@/components/Contacts';
2-
import Footer from '@/components/Footer';
3-
import Navbar from '@/components/Navbar';
2+
import Layout from '@/components/Layout';
43

54
export default function ContactUs() {
65
return (
7-
<section className="flex flex-col min-h-screen justify-between py-8 xl:px-24 md:px-10 px-5 relative overflow-hidden">
8-
<Navbar />
6+
<Layout>
97
<section className="py-8 xl:px-24 sm:px-10 px-5" id="contact-us">
108
<div className="text-center my-10">
119
<h1 className="font-bold text-6xl">CONTACT US</h1>
@@ -66,7 +64,6 @@ export default function ContactUs() {
6664
</div>
6765
</div>
6866
</section>
69-
<Footer />
70-
</section>
67+
</Layout>
7168
);
7269
}

‎frontend/src/pages/events.tsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import Navbar from '@/components/Navbar';
2-
import Footer from '@/components/Footer';
1+
import Layout from '@/components/Layout';
32
import axios from 'axios';
43

54
export default function EventsPage() {
@@ -13,10 +12,8 @@ export default function EventsPage() {
1312
};
1413

1514
return (
16-
<section className="flex flex-col min-h-screen justify-between py-8 xl:px-24 md:px-10 px-5 relative overflow-hidden">
17-
<Navbar />
15+
<Layout>
1816
<button onClick={() => pingBackend()}>Ping backend</button>
19-
<Footer />
20-
</section>
17+
</Layout>
2118
);
2219
}

‎frontend/src/pages/resources.tsx‎

Lines changed: 98 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,103 @@
1-
import Navbar from '@/components/Navbar';
2-
import Footer from '@/components/Footer';
3-
import Resources from '@/components/Resources';
1+
import Layout from '@/components/Layout';
2+
import Image from 'next/image';
3+
import { resourceCards, stage1, stage2, stage3 } from '@/../public/data/resourceCards';
44

55
export default function ResourcesPage() {
6+
const boxStyling =
7+
'border border-[#595F6D] rounded-lg hover:border-[#788093] hover:bg-[#070034] hover:bg-opacity-75 transition-all duration-300';
8+
69
return (
7-
<section className="flex flex-col min-h-screen justify-between py-8 xl:px-24 md:px-10 px-5 relative overflow-hidden">
8-
<Navbar />
9-
<Resources/>
10-
<Footer />
11-
</section>
10+
<Layout>
11+
<section className="bg-no-repeat bg-center py-8 px-15 min-h-screen flex justify-center items-center">
12+
<div className="2xl:w-[90rem] xl:w-[75rem] w-[90%]">
13+
<div className="relative">
14+
<Image src="assets/resources_bg.svg" alt="Background" className="-z-50 absolute" fill />
15+
<div className="text-center my-10">
16+
<h2 className="font-bold text-6xl">RESOURCES</h2>
17+
</div>
18+
19+
<div className="py-8 bg-no-repeat bg-center">
20+
<div className="grid grid-cols-4 1 gap-x-9 gap-y-5">
21+
{stage1.map((item: resourceCards) => {
22+
return (
23+
<a
24+
key={item.id}
25+
href={item.href}
26+
target="_blank"
27+
className={`col-span-4 p-5 ${boxStyling} flex`}
28+
>
29+
<div className="flex justify-center align-middle items-center pl-2 pr-10">
30+
<Image
31+
src={item.svg}
32+
alt={item.alt}
33+
draggable="false"
34+
width={item.width}
35+
height={item.height}
36+
/>
37+
</div>
38+
<div>
39+
<h2 className="mt-5 text-3xl font-extrabold">{item.title}</h2>
40+
<p className="mt-7 text-lg mb-5">{item.desc}</p>
41+
</div>
42+
</a>
43+
);
44+
})}
45+
46+
{stage2.map((item: resourceCards) => {
47+
return (
48+
<a
49+
key={item.id}
50+
href={item.href}
51+
target="_blank"
52+
className={`xl:col-span-1 col-span-4 p-5 ${boxStyling}`}
53+
>
54+
<div className="flex align-middle items-center pt-2 pb-4">
55+
<Image
56+
src={item.svg}
57+
alt={item.alt}
58+
draggable="false"
59+
width={item.width}
60+
height={item.height}
61+
/>
62+
</div>
63+
<div>
64+
<h2 className="mt-5 text-3xl font-extrabold">{item.title}</h2>
65+
<p className="mt-7 text-lg mb-5">{item.desc}</p>
66+
</div>
67+
</a>
68+
);
69+
})}
70+
71+
{stage3.map((item: resourceCards) => {
72+
return (
73+
<a
74+
key={item.id}
75+
href={item.href}
76+
target="_blank"
77+
className={`md:col-span-2 col-span-4 p-5 ${boxStyling} flex`}
78+
>
79+
<div className="flex align-middle items-center pt-2 pb-4 pr-10">
80+
<Image
81+
src={item.svg}
82+
alt={item.alt}
83+
draggable="false"
84+
width={item.width}
85+
height={item.height}
86+
className="rounded-md"
87+
/>
88+
</div>
89+
<div>
90+
<h2 className="mt-5 text-3xl font-extrabold">{item.title}</h2>
91+
<p className="mt-7 text-lg mb-5">{item.desc}</p>
92+
</div>
93+
</a>
94+
);
95+
})}
96+
</div>
97+
</div>
98+
</div>
99+
</div>
100+
</section>
101+
</Layout>
12102
);
13103
}

0 commit comments

Comments
 (0)