Skip to content

Commit af43945

Browse files
WZWrenWZWren
committed
Add basic question layout to individual qn page
1 parent 2082911 commit af43945

File tree

6 files changed

+169
-15
lines changed

6 files changed

+169
-15
lines changed

‎peerprep/app/layout.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import './globals.css'
33
import type { Metadata } from 'next'
44
import { Inter } from 'next/font/google'
55
import Container from '@/components/shared/Container'
6+
import styles from '@/style/layout.module.css';
67

78
const inter = Inter({ subsets: ['latin'] })
89

@@ -20,7 +21,7 @@ export default function RootLayout({
2021
<html lang="en">
2122
<body className={inter.className}>
2223
<TitleBar />
23-
<Container>{children}</Container>
24+
<Container className={styles.main_container}>{children}</Container>
2425
</body>
2526
</html>
2627
)

‎peerprep/app/q/[question]/page.tsx‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,26 @@
11
import { fetchQuestion } from '@/api/gateway';
22
import { Question as QnType, ErrorBody, isError } from "@/api/structs";
3+
import styles from '@/style/question.module.css';
34
import ErrorBlock from '@/components/shared/ErrorBlock';
45
import React from 'react'
6+
import QuestionBlock from './question';
57

68
type Props = {
79
params: {
810
question: string
911
}
1012
}
1113

12-
const questionBlock = (question: QnType) => (
13-
<>
14-
<h1>It works?</h1>
15-
<p>{question.description}</p>
16-
</>
17-
);
18-
1914
async function Question({ params }: Props) {
2015
const question = await fetchQuestion(params.question);
2116

2217
return (
23-
<div className="from-white">
24-
{isError(question) ? <ErrorBlock err={question as ErrorBody}/> : questionBlock(question as QnType)}
18+
<div className={styles.wrapper}>
19+
{
20+
isError(question)
21+
? <ErrorBlock err={question as ErrorBody}/>
22+
: <QuestionBlock question={question as QnType}/>
23+
}
2524
</div>
2625
)
2726
}

‎peerprep/app/q/[question]/question.tsx‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import { Question, ErrorBody, Difficulty } from "@/api/structs";
2+
import styles from '@/style/question.module.css';
3+
4+
interface Props {
5+
question : Question;
6+
}
7+
8+
const difficultyColor = (diff: Difficulty) => {
9+
return (
10+
diff === Difficulty.Easy ? <p className={`${styles.title} ${styles.easy}`}>Easy</p>
11+
: diff === Difficulty.Medium ? <p className={`${styles.title} ${styles.med}`}>Med</p>
12+
: <p className={`${styles.title} ${styles.hard}`}>Hard</p>
13+
);
14+
}
15+
16+
function QuestionBlock({ question }: Props) {
17+
const keys = Object.keys(question.test_cases);
18+
19+
const createRow = (key: string) => (
20+
<tr key={key}>
21+
<td className={`${styles.table} ${styles.cell}`}>{key}</td>
22+
<td className={`${styles.table} ${styles.cell}`}>{question.test_cases[key]}</td>
23+
</tr>
24+
);
25+
26+
return (
27+
<>
28+
<div className={styles.qn_container}>
29+
<div className={styles.title_wrapper}>
30+
<h1 className={styles.title}>Q{question.id}: {question.title}</h1>
31+
{difficultyColor(question.difficulty)}
32+
</div>
33+
<br/>
34+
<p>{question.description}</p>
35+
<br/>
36+
<table className={styles.table}>
37+
<tbody>
38+
<tr>
39+
<th className={`${styles.table} ${styles.header} ${styles.input}`}>Input</th>
40+
<th className={`${styles.table} ${styles.header} ${styles.output}`}>Expected Output</th>
41+
</tr>
42+
{keys.map(createRow)}
43+
</tbody>
44+
</table>
45+
</div>
46+
<form className={styles.editor_container}>
47+
<textarea className={styles.code_editor}/>
48+
</form>
49+
</>
50+
);
51+
}
52+
53+
export default QuestionBlock;

‎peerprep/components/shared/Container.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import React, { ReactNode } from 'react';
2-
import styles from '@/style/layout.module.css';
32

43
interface Props {
5-
children : ReactNode
4+
children : ReactNode,
5+
className : string
66
}
77

8-
function Container({ children }: Props) {
8+
function Container({ children, className }: Props) {
99
return (
10-
<div className={styles.container}>
10+
<div className={className}>
1111
{children}
1212
</div>
1313
)

‎peerprep/style/layout.module.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
padding: 1px 5px 1px 5px;
77
}
88

9-
.container {
9+
.main_container {
1010
display: flex;
1111
flex-direction: column;
1212
min-width: 100%;

‎peerprep/style/question.module.css‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
/* TODO: If the window is more tall than wide, flex-direction should flip. */
2+
.wrapper {
3+
display: flex;
4+
flex-direction: row;
5+
justify-content: space-evenly;
6+
align-items: flex-start;
7+
padding: 10px 5px;
8+
height: 100%;
9+
width: 100%;
10+
}
11+
12+
.qn_container {
13+
display: flex;
14+
flex-direction: column;
15+
width: 48%;
16+
height: 100%;
17+
overflow-y: auto;
18+
scrollbar-width: none;
19+
-ms-overflow-style: none;
20+
}
21+
22+
.title_wrapper {
23+
display: flex;
24+
flex-direction: row;
25+
justify-content: space-between;
26+
align-items: center;
27+
width: 100%;
28+
padding: 0px 5px;
29+
}
30+
31+
.title {
32+
font-size: large;
33+
font-family: Helvetica, Arial, sans-serif;
34+
font-weight: bolder;
35+
}
36+
37+
.easy {
38+
padding: 1px;
39+
background-color: beige;
40+
border: 1px solid darkgreen;
41+
border-radius: 5%;
42+
color: darkgreen;
43+
}
44+
45+
.med {
46+
padding: 1px;
47+
background-color: azure;
48+
border: 1px solid darkgoldenrod;
49+
border-radius: 5%;
50+
color: darkgoldenrod;
51+
}
52+
53+
.hard {
54+
padding: 1px;
55+
background-color: mintcream;
56+
border: 1px solid red;
57+
border-radius: 5%;
58+
color: red;
59+
}
60+
61+
.table {
62+
text-align: center;
63+
border: 2px solid grey;
64+
}
65+
66+
.cell {
67+
font-weight: 300;
68+
}
69+
70+
.header {
71+
font-weight: bold;
72+
}
73+
74+
.input {
75+
width: 70%;
76+
}
77+
78+
.output {
79+
width: 30%;
80+
}
81+
82+
.editor_container {
83+
width: 48%;
84+
height: 100%;
85+
overflow-y: none;
86+
scrollbar-width: none;
87+
-ms-overflow-style: none;
88+
}
89+
90+
.code_editor {
91+
width: 100%;
92+
height: 100%;
93+
border-radius: 1%;
94+
border: 1px darkblue;
95+
outline: none;
96+
font-family: 'Courier New', Courier, monospace;
97+
background-color: rgb(29, 29, 53);
98+
color: beige;
99+
padding: 10px 6px;
100+
resize: none;
101+
}

0 commit comments

Comments
 (0)