Skip to content

Commit 4947e78

Browse files
derekxu04derekxu04
committed
PageBody and PageTitle components
1 parent 1473b80 commit 4947e78

File tree

13 files changed

+152
-129
lines changed

13 files changed

+152
-129
lines changed

‎frontend/src/components/Layout.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import Navbar from './Navbar';
22
import Footer from './Footer';
3+
import React from 'react';
34

45
const Layout = ({ children }: { children: React.ReactNode }) => {
56
return (

‎frontend/src/components/PageBody.tsx

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import React from "react";
2+
3+
const PageBody = ({ children }: { children: React.ReactNode }) => {
4+
return (
5+
<div>
6+
<section className="py-8 xl:px-24 sm:px-10 px-5">
7+
{children}
8+
</section>
9+
</div>
10+
);
11+
}
12+
13+
export default PageBody;

‎frontend/src/components/PageTitle.tsx

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
const PageTitle = ({ title }: { title: string }) => {
2+
return (
3+
<div className="text-center mt-10 mb-5">
4+
<h1 className="font-bold text-6xl">{title}</h1>
5+
</div>
6+
)
7+
}
8+
9+
export default PageTitle;

‎frontend/src/pages/about/constitution.tsx

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
import Layout from "@/components/Layout";
2+
import PageBody from "@/components/PageBody";
3+
import PageTitle from "@/components/PageTitle";
24

3-
export default function Constitution() {
5+
const ConstitutionPage = () => {
46
return (
57
<Layout>
6-
<section className="py-8 xl:px-24 sm:px-10 px-5" id="constitution">
7-
<div className="text-center my-10">
8-
<h1 className="font-bold text-6xl">CONSTITUTION</h1>
9-
</div>
10-
8+
<PageTitle title="CONSTITUTION" />
9+
<PageBody>
1110
<div>
1211
<p className="text-xl my-5">
1312
Since the end of 2013, the constitution has been hosted on Github. The constitution by which CSESoc runs can be found here:
@@ -48,7 +47,9 @@ export default function Constitution() {
4847
</li>
4948
</ul>
5049
</div>
51-
</section>
50+
</PageBody>
5251
</Layout>
5352
);
5453
}
54+
55+
export default ConstitutionPage;

‎frontend/src/pages/about/election-guide.tsx

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
import Layout from "@/components/Layout";
2+
import PageBody from "@/components/PageBody";
3+
import PageTitle from "@/components/PageTitle";
24

3-
const ElectionGuide = () => {
5+
const ElectionGuidePage = () => {
46
return (
57
<Layout>
6-
<section className="py-8 xl:px-24 sm:px-10 px-5" id="election-guide">
7-
<div className="text-center my-10">
8-
<h1 className="font-bold text-6xl">ELECTION NOMINATION GUIDE</h1>
9-
</div>
10-
8+
<PageTitle title="ELECTION GUIDE" />
9+
<PageBody>
1110
<div>
1211
<p className="text-lg my-5">
1312
Before considering any executive position for CSESoc, it
@@ -108,9 +107,9 @@ const ElectionGuide = () => {
108107
</ul>
109108
</div>
110109
</div>
111-
</section>
110+
</PageBody>
112111
</Layout>
113112
);
114113
};
115114

116-
export default ElectionGuide;
115+
export default ElectionGuidePage;

‎frontend/src/pages/about/execs-directors-subcoms.tsx

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
import Layout from "@/components/Layout";
2+
import PageBody from "@/components/PageBody";
3+
import PageTitle from "@/components/PageTitle";
24

3-
const ExecsDirectorsSubcommittees = () => {
5+
const ExecsDirectorsSubcommitteesPage = () => {
46
return (
57
<Layout>
6-
<section className="py-8 xl:px-24 sm:px-10 px-5" id="execs-directors-subcommittees">
7-
<div className="text-center my-10">
8-
<h1 className="font-bold text-6xl">EXECS, DIRECTORS & SUBCOMMITTEES</h1>
9-
</div>
10-
8+
<PageTitle title="EXECS, DIRECTORS & SUBCOMMITTEES" />
9+
<PageBody>
1110
{/* CSESOC TEAM */}
1211
<div>
1312
<p className="text-xl my-5">
@@ -244,9 +243,9 @@ const ExecsDirectorsSubcommittees = () => {
244243
</p>
245244
</div>
246245
</div>
247-
</section>
246+
</PageBody>
248247
</Layout>
249248
);
250249
}
251250

252-
export default ExecsDirectorsSubcommittees;
251+
export default ExecsDirectorsSubcommitteesPage;

‎frontend/src/pages/about/faqs.tsx

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
import Layout from "@/components/Layout";
2+
import PageBody from "@/components/PageBody";
3+
import PageTitle from "@/components/PageTitle";
24

3-
const Faqs = () => {
5+
const FaqsPage = () => {
46
return (
57
<Layout>
6-
<section className="py-8 xl:px-24 sm:px-10 px-5" id="faqs">
7-
<div className="text-center my-10">
8-
<h1 className="font-bold text-6xl">FREQUENTLY ASKED QUESTIONS</h1>
9-
</div>
10-
8+
<PageTitle title="FREQUENTLY ASKED QUESTIONS" />
9+
<PageBody>
1110
<div>
1211
<p className="text-2xl my-5 font-semibold">
1312
What is CSESoc?
@@ -50,9 +49,9 @@ const Faqs = () => {
5049
subcommittee. Subcommittee recruitment opens during T1 of each year.
5150
</p>
5251
</div>
53-
</section>
52+
</PageBody>
5453
</Layout>
5554
);
5655
};
5756

58-
export default Faqs;
57+
export default FaqsPage;

‎frontend/src/pages/about/index.tsx

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
11
import Layout from "@/components/Layout";
2+
import PageTitle from "@/components/PageTitle";
23
import Image from 'next/image';
34
import Link from 'next/link';
45

56
export default function AboutPage() {
67
return (
78
<Layout>
8-
<section className="py-8 xl:px-24 sm:px-10 px-5" id="about">
9-
<div className="text-center my-10">
10-
<h2 className="font-bold text-6xl">ABOUT US</h2>
11-
</div>
9+
<PageTitle title="ABOUT US" />
10+
<section className="py-8 xl:px-24 sm:px-10 px-5">
1211
<div className="flex justify-center items-center">
1312
<div className="lg:grid grid-cols-6 flex-1 max-w-[90rem]">
1413
{/* LEFT SIDE */}

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

Lines changed: 11 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,15 @@
1-
import Navbar from "@/components/Navbar";
2-
import Footer from "@/components/Footer";
1+
import Layout from "@/components/Layout";
2+
import PageBody from "@/components/PageBody";
3+
import PageTitle from "@/components/PageTitle";
34

4-
const OurHistory = () => {
5+
const OurHistoryPage = () => {
56
// Years from 2020 to 2007
67
const years: number[] = Array.from({ length: 14 }, (_, i) => 2020 - i);
78

89
return (
9-
<section className="flex flex-col min-h-screen justify-between py-8 xl:px-24 md:px-10 px-5 relative overflow-hidden">
10-
<Navbar />
11-
<section className="py-8 xl:px-24 sm:px-10 px-5" id="our-history">
12-
<div className="text-center my-10">
13-
<h1 className="font-bold text-6xl">OUR HISTORY</h1>
14-
</div>
15-
10+
<Layout>
11+
<PageTitle title="OUR HISTORY" />
12+
<PageBody>
1613
<div>
1714
<p className="text-xl my-5">
1815
CSESoc was formed in October 2006 from the old CompSoc and SESoc societies.
@@ -50,10 +47,9 @@ const OurHistory = () => {
5047
</div>
5148
</div>
5249
))}
53-
</section>
54-
<Footer />
55-
</section>
56-
)
50+
</PageBody>
51+
</Layout>
52+
);
5753
}
5854

59-
export default OurHistory;
55+
export default OurHistoryPage;

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import Contacts from '@/components/Contacts';
22
import Layout from '@/components/Layout';
3+
import PageBody from '@/components/PageBody';
4+
import PageTitle from '@/components/PageTitle';
35

46
export default function ContactUsPage() {
57
return (
68
<Layout>
7-
<section className="py-8 xl:px-24 sm:px-10 px-5" id="contact-us">
8-
<div className="text-center my-10">
9-
<h1 className="font-bold text-6xl">CONTACT US</h1>
10-
</div>
11-
9+
<PageTitle title="CONTACT US" />
10+
11+
<PageBody>
1212
<ul>
1313
<li>
1414
<h3 className="text-2xl font-semibold pt-5">
@@ -63,7 +63,7 @@ export default function ContactUsPage() {
6363
<Contacts />
6464
</div>
6565
</div>
66-
</section>
66+
</PageBody>
6767
</Layout>
6868
);
6969
}

‎frontend/src/pages/events.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import Layout from '@/components/Layout';
2+
import PageTitle from '@/components/PageTitle';
23
import axios from 'axios';
34

45
export default function EventsPage() {
@@ -13,6 +14,7 @@ export default function EventsPage() {
1314

1415
return (
1516
<Layout>
17+
<PageTitle title="EVENTS" />
1618
<button onClick={() => pingBackend()}>Ping backend</button>
1719
</Layout>
1820
);

‎frontend/src/pages/resources.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
11
import Layout from '@/components/Layout';
22
import Image from 'next/image';
33
import { resourceCards, stage1, stage2, stage3 } from '@/../public/data/resourceCards';
4+
import PageTitle from '@/components/PageTitle';
45

56
export default function ResourcesPage() {
67
const boxStyling =
78
'border border-[#595F6D] rounded-lg hover:border-[#788093] hover:bg-[#070034] hover:bg-opacity-75 transition-all duration-300';
89

910
return (
1011
<Layout>
12+
<PageTitle title="RESOURCES" />
13+
1114
<section className="bg-no-repeat bg-center py-8 px-15 min-h-screen flex justify-center items-center">
1215
<div className="2xl:w-[90rem] xl:w-[75rem] w-[90%]">
1316
<div className="relative">
1417
<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>
1818

1919
<div className="py-8 bg-no-repeat bg-center">
2020
<div className="grid grid-cols-4 1 gap-x-9 gap-y-5">

0 commit comments

Comments
 (0)