Skip to content

Commit 7014c74

Browse files
pongsapholpongsaphol
authored
Add PageLayout
1 parent 321d37f commit 7014c74

14 files changed

+1278
-1256
lines changed

‎src/components/Layout.tsx

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { FunctionComponent } from 'react'
2+
import { Nav } from 'components/Nav'
3+
import { Footer } from './Footer'
4+
export const Layout: FunctionComponent = ({ children }) => (
5+
<>
6+
<div className="relative w-full h-full">
7+
<Nav />
8+
<div className="relative w-full">
9+
<div className="absolute right-full bg-red-400 w-20 h-full transform translate-x-2 sm:translate-x-6 md:translate-x-12 lg:translate-x-16 xl:translate-x-20 z-10" />
10+
<div className="w-full">{children}</div>
11+
</div>
12+
</div>
13+
<Footer />
14+
</>
15+
)

‎src/components/footage.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
export const MainFootage = () => (
22
<svg
3-
className="absolute left-full transform -translate-x-48 sm:-translate-x-64 md:-translate-x-80 lg:-translate-x-96 h-full py-4"
3+
className="absolute left-full transform -translate-x-50vw h-full py-4"
44
viewBox="0 0 759 627"
55
fill="none"
66
xmlns="http://www.w3.org/2000/svg"

‎src/components/main/THACO.tsx

+1-5
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,7 @@ export const THACO = () => {
77

88
return (
99
<section className="w-full h-screen bg-gray-900 relative overflow-hidden">
10-
<div className="block absolute h-full w-full">
11-
<div className="relative h-full max-w-7xl">
12-
<MainFootage />
13-
</div>
14-
</div>
10+
<MainFootage />
1511
<div className="block absolute h-full w-full">
1612
<div className="flex flex-col w-full h-screen items-center justify-center">
1713
<div>

‎src/pages/_app.tsx

+1-7
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,11 @@
11
import type { AppProps } from 'next/app'
22
import { AuthProvider } from 'lib/auth'
3-
import { Nav } from 'components/Nav'
4-
import { Footer } from 'components/Footer'
53
import 'tailwindcss/tailwind.css'
64

75
function MyApp({ Component, pageProps }: AppProps) {
86
return (
97
<AuthProvider>
10-
<div className="relative w-full h-full">
11-
<Nav />
12-
<Component {...pageProps} />
13-
</div>
14-
<Footer />
8+
<Component {...pageProps} />
159
</AuthProvider>
1610
)
1711
}

‎src/pages/about.tsx

+51-47
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,57 @@
1+
import { Layout } from 'components/Layout'
2+
13
const About = () => {
24
return (
3-
<main className="relative w-full min-h-screen bg-gray-900">
4-
<div className="absolute right-full bg-red-400 w-20 h-full transform translate-x-2 sm:translate-x-6 md:translate-x-12 lg:translate-x-16 xl:translate-x-20 lg: z-10" />
5-
<div className="flex flex-col items-center">
6-
<div className="flex flex-col px-10 sm:px-16 md:px-24 mt-28 sm:mt-40 max-w-4xl">
7-
<p className="font-display text-3xl text-white">เกี่ยวกับเรา</p>
8-
<p className="font-display text-white py-8">
9-
พวกเราคือกลุ่มอดีตนักเรียนค่ายโอลิมปิกวิชาการคอมพิวเตอร์ที่ตั้งใจจะจัดการแข่งขันเพื่อส่งเสริมและพัฒนาเหล่านักเรียนค่ายรุ่นต่อๆ
10-
ไป ให้มีทักษะกระบวนการคิดและการเขียนโปรแกรมที่ดียิ่งขึ้น
11-
</p>
12-
<p className="font-display text-white pb-8">
13-
ทั้งนี้{' '}
14-
<span className="text-red-400">
15-
เราไม่ใช่กลุ่มคณะผู้จัดส่งผู้แทนโอลิมปิกวิชา
16-
การและมิได้มีส่วนเกี่ยวข้องกับองค์กรที่รับผิดชอบด้านโอลิมปิกวิชาการ
17-
(เช่น สอวน. หรือ สสวท.) โดยตรง
18-
</span>
19-
</p>
20-
<p className="font-display text-white pb-8">
21-
พวกเราเป็นเพียงกลุ่มอดีตนักเรียนค่ายคอมพิวเตอร์โอลิมปิกที่มีแนวคิดและความเชื่อมั่นร่วมกันที่จะพัฒนาคอมพิวเตอร์โอลิมปิกให้ดียิ่งขึ้นต่อไปในอนาคต
22-
หากสนใจร่วมงานกับพวกเรา สามารถ ติดต่อเรา ได้
23-
</p>
24-
</div>
25-
<div className="flex flex-col px-10 sm:px-16 md:px-24 my-16 max-w-4xl">
26-
<p className="font-display text-3xl text-white">About Us</p>
27-
<p className="font-display text-white py-8">
28-
We are a community of alumni from the training camps held in
29-
Thailand, having common goal of improving younger generations&apos;
30-
ability to do competitive programming and problem solving.
31-
</p>
32-
<p className="font-display text-white pb-8">
33-
<span className="text-red-400">
34-
We are not an officially authorized organization involving the
35-
process of selection, training and competition in Thailand
36-
Olympiad in Informatics (TOI) or International Olympiad in
37-
Informatics (IOI). The process of selection, training and
38-
competition is being managed officially by The Institute for the
39-
Promotion of Teaching Science and Technology (IPST) and The
40-
Promotion of Academic Olympiad and Development of Science
41-
Education Foundation under the patronage of Her Royal Highness
42-
Princess Galyani Vadhana Krom Luang Naradhiwas Rajanagarindra
43-
(POSN).{' '}
44-
</span>
45-
We are just a group of people who want to improve and promote
46-
competitive programming in Thailand.
47-
</p>
5+
<Layout>
6+
<main className="relative w-full min-h-screen bg-gray-900">
7+
<div className="flex flex-col items-center">
8+
<div className="flex flex-col px-10 sm:px-16 md:px-24 mt-28 sm:mt-40 max-w-4xl">
9+
<p className="font-display text-3xl text-white">เกี่ยวกับเรา</p>
10+
<p className="font-display text-white py-8">
11+
พวกเราคือกลุ่มอดีตนักเรียนค่ายโอลิมปิกวิชาการคอมพิวเตอร์ที่ตั้งใจจะจัดการแข่งขันเพื่อส่งเสริมและพัฒนาเหล่านักเรียนค่ายรุ่นต่อๆ
12+
ไป ให้มีทักษะกระบวนการคิดและการเขียนโปรแกรมที่ดียิ่งขึ้น
13+
</p>
14+
<p className="font-display text-white pb-8">
15+
ทั้งนี้{' '}
16+
<span className="text-red-400">
17+
เราไม่ใช่กลุ่มคณะผู้จัดส่งผู้แทนโอลิมปิกวิชา
18+
การและมิได้มีส่วนเกี่ยวข้องกับองค์กรที่รับผิดชอบด้านโอลิมปิกวิชาการ
19+
(เช่น สอวน. หรือ สสวท.) โดยตรง
20+
</span>
21+
</p>
22+
<p className="font-display text-white pb-8">
23+
พวกเราเป็นเพียงกลุ่มอดีตนักเรียนค่ายคอมพิวเตอร์โอลิมปิกที่มีแนวคิดและความเชื่อมั่นร่วมกันที่จะพัฒนาคอมพิวเตอร์โอลิมปิกให้ดียิ่งขึ้นต่อไปในอนาคต
24+
หากสนใจร่วมงานกับพวกเรา สามารถ ติดต่อเรา ได้
25+
</p>
26+
</div>
27+
<div className="flex flex-col px-10 sm:px-16 md:px-24 my-16 max-w-4xl">
28+
<p className="font-display text-3xl text-white">About Us</p>
29+
<p className="font-display text-white py-8">
30+
We are a community of alumni from the training camps held in
31+
Thailand, having common goal of improving younger
32+
generations&apos; ability to do competitive programming and
33+
problem solving.
34+
</p>
35+
<p className="font-display text-white pb-8">
36+
<span className="text-red-400">
37+
We are not an officially authorized organization involving the
38+
process of selection, training and competition in Thailand
39+
Olympiad in Informatics (TOI) or International Olympiad in
40+
Informatics (IOI). The process of selection, training and
41+
competition is being managed officially by The Institute for the
42+
Promotion of Teaching Science and Technology (IPST) and The
43+
Promotion of Academic Olympiad and Development of Science
44+
Education Foundation under the patronage of Her Royal Highness
45+
Princess Galyani Vadhana Krom Luang Naradhiwas Rajanagarindra
46+
(POSN).{' '}
47+
</span>
48+
We are just a group of people who want to improve and promote
49+
competitive programming in Thailand.
50+
</p>
51+
</div>
4852
</div>
49-
</div>
50-
</main>
53+
</main>
54+
</Layout>
5155
)
5256
}
5357

‎src/pages/dashboard.tsx

+61-54
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,77 @@
11
import { useAuth } from 'lib/auth'
22

3+
import { Layout } from 'components/Layout'
4+
35
const Dashboard = () => {
46
const auth = useAuth()
57
return (
6-
<main className="relative w-full min-h-screen bg-gray-900">
7-
<div className="absolute right-full bg-red-400 w-20 h-full transform translate-x-2 sm:translate-x-6 md:translate-x-12 lg:translate-x-16 xl:translate-x-20 lg: z-10" />
8-
<div className="flex flex-col items-center px-10 sm:px-16 md:px-24">
9-
<div className="flex flex-col mt-28 sm:mt-32 mb-20 max-w-2xl divide-y divide-white w-full font-display border-b border-white">
10-
<div className="flex justify-between py-6 items-center">
11-
<div className="flex flex-col">
12-
<p className="font-semibold text-white">ข้อมูลผู้เข้าแข่งขัน</p>
13-
<p className="text-white">Personal details</p>
8+
<Layout>
9+
<main className="relative w-full min-h-screen bg-gray-900">
10+
<div className="flex flex-col items-center px-10 sm:px-16 md:px-24">
11+
<div className="flex flex-col mt-28 sm:mt-32 mb-20 max-w-2xl divide-y divide-white w-full font-display border-b border-white">
12+
<div className="flex justify-between py-6 items-center">
13+
<div className="flex flex-col">
14+
<p className="font-semibold text-white">ข้อมูลผู้เข้าแข่งขัน</p>
15+
<p className="text-white">Personal details</p>
16+
</div>
17+
<button className="bg-red-400 py-3 px-4 text-white font-bold rounded-3xl">
18+
เข้าสู่การแข่งขัน
19+
</button>
1420
</div>
15-
<button className="bg-red-400 py-3 px-4 text-white font-bold rounded-3xl">
16-
เข้าสู่การแข่งขัน
17-
</button>
18-
</div>
19-
<div className="flex w-full py-6">
20-
<p className="w-1/3 text-white font-semibold">ชื่อผู้ใช้</p>
21-
<p className="w-2/3 text-white pl-4">{auth?.userData?.username}</p>
22-
</div>
23-
{auth?.userData?.anonymous ? (
2421
<div className="flex w-full py-6">
25-
<p className="text-white">
26-
<b>เข้าร่วมแบบไม่เปิดเผยตัวตน</b>{' '}
27-
ไม่มีการแสดงคะแนนต่อสาธารณะในระหว่างการแข่ง
28-
รวมถึงไม่นำไปคิดคะแนนแข่งขัน และไม่ได้รับของรางวัล
22+
<p className="w-1/3 text-white font-semibold">ชื่อผู้ใช้</p>
23+
<p className="w-2/3 text-white pl-4">
24+
{auth?.userData?.username}
2925
</p>
3026
</div>
31-
) : (
32-
<>
27+
{auth?.userData?.anonymous ? (
3328
<div className="flex w-full py-6">
34-
<p className="w-1/3 text-white font-semibold">ชื่อ-สกุล</p>
35-
<p className="w-2/3 text-white pl-4">
36-
{auth?.userData?.firstname} {auth?.userData?.lastname}
29+
<p className="text-white">
30+
<b>เข้าร่วมแบบไม่เปิดเผยตัวตน</b>{' '}
31+
ไม่มีการแสดงคะแนนต่อสาธารณะในระหว่างการแข่ง
32+
รวมถึงไม่นำไปคิดคะแนนแข่งขัน และไม่ได้รับของรางวัล
3733
</p>
3834
</div>
39-
<div className="flex w-full py-6">
40-
<p className="w-1/3 text-white font-semibold">อีเมล</p>
41-
<p className="w-2/3 text-white overflow-x-scroll pl-4">
42-
{auth?.userData?.email}
43-
</p>
44-
</div>
45-
<div className="flex w-full py-6">
46-
<p className="w-1/3 text-white font-semibold">
47-
เบอร์โทรศัพท์สำหรับติดต่อ
48-
</p>
49-
<p className="w-2/3 text-white pl-4">{auth?.userData?.tel}</p>
50-
</div>
51-
<div className="flex w-full py-6">
52-
<p className="w-1/3 text-white font-semibold">
53-
ที่อยู่สำหรับส่งของรางวัล
54-
</p>
55-
<p className="w-2/3 text-white pl-4">
56-
{auth?.userData?.address}
57-
</p>
58-
</div>
59-
<div className="flex w-full py-6">
60-
<p className="w-1/3 text-white font-semibold">ขนาดเสื้อ</p>
61-
<p className="w-2/3 text-white pl-4">{auth?.userData?.size}</p>
62-
</div>
63-
</>
64-
)}
35+
) : (
36+
<>
37+
<div className="flex w-full py-6">
38+
<p className="w-1/3 text-white font-semibold">ชื่อ-สกุล</p>
39+
<p className="w-2/3 text-white pl-4">
40+
{auth?.userData?.firstname} {auth?.userData?.lastname}
41+
</p>
42+
</div>
43+
<div className="flex w-full py-6">
44+
<p className="w-1/3 text-white font-semibold">อีเมล</p>
45+
<p className="w-2/3 text-white overflow-x-scroll pl-4">
46+
{auth?.userData?.email}
47+
</p>
48+
</div>
49+
<div className="flex w-full py-6">
50+
<p className="w-1/3 text-white font-semibold">
51+
เบอร์โทรศัพท์สำหรับติดต่อ
52+
</p>
53+
<p className="w-2/3 text-white pl-4">{auth?.userData?.tel}</p>
54+
</div>
55+
<div className="flex w-full py-6">
56+
<p className="w-1/3 text-white font-semibold">
57+
ที่อยู่สำหรับส่งของรางวัล
58+
</p>
59+
<p className="w-2/3 text-white pl-4">
60+
{auth?.userData?.address}
61+
</p>
62+
</div>
63+
<div className="flex w-full py-6">
64+
<p className="w-1/3 text-white font-semibold">ขนาดเสื้อ</p>
65+
<p className="w-2/3 text-white pl-4">
66+
{auth?.userData?.size}
67+
</p>
68+
</div>
69+
</>
70+
)}
71+
</div>
6572
</div>
66-
</div>
67-
</main>
73+
</main>
74+
</Layout>
6875
)
6976
}
7077

‎src/pages/index.tsx

+8-17
Original file line numberDiff line numberDiff line change
@@ -5,26 +5,17 @@ import { Donation } from 'components/main/Donation'
55
import { Overview } from 'components/main/Overview'
66
import { Schedule } from 'components/main/Schedule'
77
import { Question } from 'components/main/Question'
8+
import { Layout } from 'components/Layout'
89

910
const Home: NextPage = () => {
1011
return (
11-
<div className="relative flex flex-col items-center justify-center min-h-screen">
12-
<Head>
13-
<title>TOCPC 2021</title>
14-
<link rel="icon" href="/favicon.ico" />
15-
</Head>
16-
17-
<main className="relative w-full">
18-
<div className="absolute right-full bg-red-400 w-20 h-full transform translate-x-2 sm:translate-x-6 md:translate-x-12 lg:translate-x-16 xl:translate-x-20 lg: z-10" />
19-
<div className="w-full">
20-
<THACO />
21-
<Overview />
22-
<Schedule />
23-
<Donation />
24-
<Question />
25-
</div>
26-
</main>
27-
</div>
12+
<Layout>
13+
<THACO />
14+
<Overview />
15+
<Schedule />
16+
<Donation />
17+
<Question />
18+
</Layout>
2819
)
2920
}
3021

0 commit comments

Comments
 (0)