diff --git a/src/components/LevelLabel.tsx b/src/components/LevelLabel.tsx new file mode 100644 index 00000000..784f3c1f --- /dev/null +++ b/src/components/LevelLabel.tsx @@ -0,0 +1,12 @@ +import {levelCalculator} from "@/resources/level"; +import clsx from "clsx"; + +interface Props { + experience: number; + className?: string; +} + +export default function LevelLabel({experience, className}: Props) { + const {label} = levelCalculator(experience); + return {label}; +} diff --git a/src/components/LevelProgressBar.tsx b/src/components/LevelProgressBar.tsx new file mode 100644 index 00000000..e2d2c3ad --- /dev/null +++ b/src/components/LevelProgressBar.tsx @@ -0,0 +1,25 @@ +import {levelCalculator} from "@/resources/level"; +import clsx from "clsx"; + +interface Props { + experience: number; + className?: string; + progressBarWidth?: string; +} + +export default function LevelProgressBar({experience, className, progressBarWidth = "w-64"}: Props) { + const levelResult = levelCalculator(experience); + + return ( +
+
+ Lvl. {levelResult.currentLevel} + + Lvl. {levelResult.nextLevel} +
+ + {experience.toLocaleString("en")} / {levelResult.nextLevelExperience.toLocaleString("en")} + +
+ ); +} diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index cc74e68f..766e5740 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -1,9 +1,17 @@ +import Link from "next/link"; + +interface Props { + profilePicture: string; +} + /* eslint-disable @next/next/no-img-element */ -export default function Navbar() { +export default function Navbar({profilePicture}: Props) { return (
- IELTS GPT + + IELTS GPT +
@@ -12,7 +20,7 @@ export default function Navbar() {
    diff --git a/src/components/ProfileCard.tsx b/src/components/ProfileCard.tsx new file mode 100644 index 00000000..e7ebe28c --- /dev/null +++ b/src/components/ProfileCard.tsx @@ -0,0 +1,29 @@ +/* eslint-disable @next/next/no-img-element */ +import {User} from "@/interfaces/user"; +import clsx from "clsx"; +import LevelLabel from "./LevelLabel"; +import LevelProgressBar from "./LevelProgressBar"; + +interface Props { + user: User; + className: string; +} + +export default function ProfileCard({user, className}: Props) { + return ( +
    +
    +
    + Profile picture +
    +
    + + {user.name.first} {user.name.last} + + +
    +
    + +
    + ); +} diff --git a/src/components/ProfileLevel.tsx b/src/components/ProfileLevel.tsx index c0870d0c..a0cf7b3b 100644 --- a/src/components/ProfileLevel.tsx +++ b/src/components/ProfileLevel.tsx @@ -2,6 +2,8 @@ import {User} from "@/interfaces/user"; import {levelCalculator} from "@/resources/level"; import clsx from "clsx"; +import LevelLabel from "./LevelLabel"; +import LevelProgressBar from "./LevelProgressBar"; interface Props { user: User; @@ -16,18 +18,9 @@ export default function ProfileLevel({user, className}: Props) {
    Profile picture
    -
    - {levelResult.label} -
    -
    - Lvl. {levelResult.currentLevel} - - Lvl. {levelResult.nextLevel} -
    - - {user.experience.toLocaleString("en")} / {levelResult.nextLevelExperience.toLocaleString("en")} - -
    +
    + +
    ); diff --git a/src/demo/user.json b/src/demo/user.json new file mode 100644 index 00000000..c0c7a700 --- /dev/null +++ b/src/demo/user.json @@ -0,0 +1,10 @@ +{ + "username": "tiago.ribeiro", + "name": { + "first": "Tiago", + "last": "Ribeiro" + }, + "profilePicture": "https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg", + "id": "cb20bf1c-188b-409c-acc1-ee59295684f4", + "experience": 561 +} \ No newline at end of file diff --git a/src/interfaces/user.ts b/src/interfaces/user.ts index cd43e2dd..d6b8b5b5 100644 --- a/src/interfaces/user.ts +++ b/src/interfaces/user.ts @@ -1,4 +1,11 @@ export interface User { + username: string; + name: Name; profilePicture: string; + id: string; experience: number; } +interface Name { + first: string; + last: string; +} diff --git a/src/pages/exam.tsx b/src/pages/exam.tsx index 1a5ab579..a8bd8640 100644 --- a/src/pages/exam.tsx +++ b/src/pages/exam.tsx @@ -10,6 +10,9 @@ import {useRouter} from "next/router"; import {errorButtonStyle, infoButtonStyle} from "@/constants/buttonStyles"; import ProfileLevel from "@/components/ProfileLevel"; +// TODO: Remove this import +import JSON_USER from "@/demo/user.json"; + export default function Home() { const [selectedModules, setSelectedModules] = useState([]); const router = useRouter(); @@ -28,14 +31,11 @@ export default function Home() {
    - +
    {/* //TODO: Change this section to work with the user account */} - +
    - Create Next App - + IELTS GPT | Muscat Training Institute + -
    - +
    +
    - -
    - - +
    +
    + +
    +
    + +