Skip to content

Commit 1ab39af

Browse files
jamesbmaddenjamesbmadden
authored
Merge pull request #75 from LiteraLingo-Workspace/frontpage
Frontpage Frontend PR
2 parents eef9b3d + eab81c5 commit 1ab39af

11 files changed

Lines changed: 429 additions & 10 deletions

File tree

‎src/app/_components/FrontPage/course/Choice.module.css‎

Lines changed: 167 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
1+
.courseCard {
2+
display: flex;
3+
flex-direction: row;
4+
height: 95px;
5+
width: 300px;
6+
justify-content: space-between;
7+
align-items: center;
8+
text-align: center;
9+
/* border: 2px solid var(--warmYellow); */
10+
border-radius: 16px;
11+
/* box-shadow: 0px 4px 0px 0px; */
12+
cursor: pointer;
13+
/* background: var(--faintYellow); */
14+
padding: 0 16px;
15+
16+
margin-top: 20px;
17+
18+
}
19+
20+
.courseHeader {
21+
display: flex;
22+
justify-content: space-between;
23+
align-items: center;
24+
width: 100%;
25+
}
26+
27+
.courseTitle {
28+
text-align: center;
29+
font-family: var(--font-poppins), sans-serif;
30+
font-weight: 700;
31+
font-size: 19px;
32+
color: var(--primary);
33+
margin: 0;
34+
}
35+
36+
.courseProgress {
37+
font-family: var(--font-poppins), sans-serif;
38+
font-weight: 600;
39+
font-size: 12px;
40+
color: var(--primary);
41+
}
42+
43+
.progressBar {
44+
position: relative;
45+
width: 100px;
46+
height: 12px;
47+
background: var(--faintGrey);
48+
border-radius: 25px;
49+
overflow: hidden;
50+
margin: 8px 0;
51+
}
52+
53+
.progressWrapper {
54+
display: flex;
55+
56+
justify-content: space-between;
57+
}
58+
59+
.progressFill {
60+
height: 100%;
61+
background: var(--coolAccentBg);
62+
border-radius: 4px;
63+
transition: width 0.3s ease;
64+
}
65+
66+
.startBtn,
67+
.reviewBtn {
68+
display: inline-block;
69+
width: 80px;
70+
height: 25px;
71+
padding: 8px 16px;
72+
font-family: var(--font-poppins), sans-serif;
73+
font-weight: 500;
74+
font-size: 18px;
75+
text-align: center;
76+
text-decoration: none;
77+
border-radius: 25px;
78+
cursor: pointer;
79+
transition: background-color 0.3s ease, color 0.3s ease;
80+
}
81+
82+
.startBtn {
83+
background: var(--warm);
84+
color: var(--white);
85+
border: none;
86+
}
87+
88+
/* .startBtn:hover {
89+
background: #d9534f;
90+
} */
91+
92+
.reviewBtn {
93+
background: var(--warm);
94+
color: var(--white);
95+
border: none;
96+
}
97+
98+
/* .reviewBtn:hover {
99+
background: #5cb85c;
100+
} */
101+
102+
103+
.selectedcourseContainer {
104+
display: flex;
105+
flex-direction: column;
106+
height: 95px;
107+
width: 344px;
108+
justify-content: center;
109+
align-items: center;
110+
border: 2px solid var(--coolDark);
111+
border-radius: 16px;
112+
box-shadow: 0px 4px 0px 0px black;
113+
cursor: pointer;
114+
background: var(--coolAccentBg);
115+
}
116+
117+
.correctcourse {
118+
background-color: var(--faintSuccess);
119+
border: 2px solid var(--success);
120+
box-shadow: 0px 4px 0px 0px var(--success);
121+
}
122+
123+
.incorrectcourse {
124+
background-color: var(--faintFailure);
125+
border: 2px solid var(--failure);
126+
box-shadow: 0px 4px 0px 0px var(--failure);
127+
}
128+
129+
@media screen and (max-height: 840px) {
130+
.courseContainer,
131+
.selectedcourseContainer {
132+
height: 80px;
133+
}
134+
}
135+
@media screen and (max-height: 750px) {
136+
.courseContainer,
137+
.selectedcourseContainer {
138+
height: 64px;
139+
}
140+
}
141+
142+
.questionLabel {
143+
font-family: var(--font-poppins), sans-serif;
144+
font-weight: 700;
145+
font-size: 22px;
146+
line-height: 33px;
147+
color: var(--primary);
148+
text-align: left;
149+
}
150+
151+
.courseText {
152+
font-family: var(--font-poppins), sans-serif;
153+
font-weight: 400;
154+
font-size: 20px;
155+
line-height: 30px;
156+
text-align: center;
157+
color: var(--primary);
158+
}
159+
160+
.selectedcourseText {
161+
font-family: var(--font-poppins), sans-serif;
162+
font-weight: 400;
163+
font-size: 20px;
164+
line-height: 30px;
165+
text-align: center;
166+
color: white;
167+
}

‎src/app/_components/FrontPage/course/Course.tsx‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import React from "react";
2+
import styles from "./Choice.module.css";
3+
4+
interface CourseProps {
5+
title: string;
6+
progress: number;
7+
totalProgress: number;
8+
urlToCourse: string;
9+
bgColour: string;
10+
borderColour: string;
11+
}
12+
13+
export const Course: React.FC<CourseProps> = ({
14+
title,
15+
progress,
16+
totalProgress,
17+
urlToCourse,
18+
bgColour,
19+
borderColour,
20+
21+
}) => {
22+
const progressPercentage = (progress / totalProgress) * 100;
23+
const isCompleted = progress === totalProgress;
24+
25+
return (
26+
<div
27+
className={styles.courseCard}
28+
style={
29+
{
30+
border: `2px solid ${borderColour}`,
31+
backgroundColor: bgColour,
32+
boxShadow: `0px 4px 0px ${borderColour}`
33+
}}>
34+
<div>
35+
<h3 className={styles.courseTitle}>{title}</h3>
36+
37+
38+
39+
<div className={styles.courseTitle} style={{fontSize: '14px'}}>Progress</div>
40+
41+
<div className={styles.progressWrapper}>
42+
43+
<div className={styles.progressBar}>
44+
<div
45+
className={styles.progressFill}
46+
style={{ width: `${progressPercentage}%` }}
47+
/>
48+
</div>
49+
50+
<span className={styles.courseProgress}>
51+
&nbsp; &nbsp; {progress}/{totalProgress}
52+
</span>
53+
54+
55+
56+
57+
</div>
58+
59+
</div>
60+
61+
<a href={urlToCourse} className={isCompleted ? styles.reviewBtn : styles.startBtn}>
62+
{isCompleted ? "Review" : progress > 0 ? "Continue" : "Start"}
63+
</a>
64+
</div>
65+
);
66+
};
67+

‎src/app/_components/FrontPage/course/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { Course } from "./Course";

‎src/app/_components/FrontPage/index.module.css‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
.container {
2+
display: flex;
3+
flex-direction: column;
4+
position: absolute;
5+
overflow: hidden;
6+
top: 0;
7+
left: 0;
8+
width: 100%;
9+
height: 100%;
10+
}
11+
12+
.subContainer {
13+
14+
position: absolute;
15+
top: 170px;
16+
display: flex;
17+
max-height: 723px;
18+
height: calc(100% - 104px - 120px);
19+
width: 100%;
20+
z-index: 1;
21+
overflow-y: auto;
22+
flex-direction: column;
23+
align-items: center;
24+
bottom: 120px;
25+
26+
}
27+
28+
/* Course{
29+
display: flex;
30+
flex-direction: column;
31+
align-items: center;
32+
width: 100%;
33+
margin-top: 20px;
34+
} */
35+
36+
.subContainerReview {
37+
position: absolute;
38+
margin-top: 20px;
39+
top: 104px;
40+
display: flex;
41+
max-height: 723px;
42+
height: calc(100% - 104px - 120px);
43+
width: 100%;
44+
z-index: 1;
45+
overflow-y: auto;
46+
flex-direction: column;
47+
align-items: center;
48+
bottom: 120px;
49+
}
50+
51+
/* adjust for smaller header on very small screens (iPhone SE) */
52+
@media screen and (max-height: 750px) {
53+
.subContainer {
54+
top: 60px;
55+
}
56+
}

‎src/app/_components/FrontPage/index.tsx‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
"use client";
2+
3+
import styles from "./index.module.css";
4+
import { Header } from "../shared/Header/Header";
5+
import { theme } from "../../../styles/index";
6+
import { Background } from "../shared/Background/Background";
7+
import { Navbar } from "../shared/Navbar/Navbar";
8+
import { Course } from "./course";
9+
export const FrontPage: React.FC = () => {
10+
11+
12+
return (
13+
<div className={styles.container}>
14+
<Background />
15+
<Header
16+
title="Quiz"
17+
subtitle="Test your knowledge!"
18+
color={theme.colors.primary}
19+
20+
/>
21+
22+
<div className={styles.subContainer}>
23+
24+
25+
<Course
26+
bgColour = {theme.colors.faintYellow}
27+
borderColour={theme.colors.warmYellow}
28+
title="Simile"
29+
progress={0}
30+
totalProgress={15} urlToCourse={"/quiz/simile"}
31+
/>
32+
33+
<Course
34+
bgColour = {theme.colors.faintBlue}
35+
borderColour={theme.colors.coolAccentBg}
36+
37+
38+
title="Metaphor"
39+
progress={2}
40+
totalProgress={15} urlToCourse={"/quiz/metaphor"}
41+
/>
42+
43+
<Course
44+
bgColour= {theme.colors.faintCoolDark}
45+
borderColour={theme.colors.coolDark}
46+
47+
48+
title="Idiom"
49+
progress={15}
50+
totalProgress={15} urlToCourse={"/quiz/idiom"}
51+
/>
52+
53+
<Course
54+
bgColour = {theme.colors.white}
55+
borderColour={theme.colors.coolDark}
56+
57+
58+
title="Random"
59+
progress={0}
60+
totalProgress={15} urlToCourse={"/quiz/random"}
61+
/>
62+
63+
</div>
64+
<Navbar />
65+
</div>
66+
);
67+
};

‎src/app/_components/QuizPage/StatusInfo/StatusInfo.tsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { IoCloseOutline } from "react-icons/io5";
33
import { theme } from "../../../../styles/index";
44
import { ProgressBar } from "./ProgressBar";
55
import { StarInfo } from "./StarInfo";
6+
import Link from 'next/link'
67

78
interface StatusInfoProps {
89
completed: number;
@@ -12,10 +13,12 @@ interface StatusInfoProps {
1213
export const StatusInfo: React.FC<StatusInfoProps> = ({ completed, total }) => {
1314
return (
1415
<div className={styles.container}>
15-
<IoCloseOutline
16-
size={50}
17-
style={{ color: `${theme.colors.secondary}` }}
18-
/>
16+
<Link href="/quiz">
17+
<IoCloseOutline
18+
size={50}
19+
style={{ color: `${theme.colors.secondary}` }}
20+
/>
21+
</Link>
1922
<ProgressBar completed={completed} total={total} />
2023
<StarInfo />
2124
</div>

0 commit comments

Comments
 (0)