/* eslint-disable @next/next/no-img-element */ import Head from "next/head"; import Navbar from "@/components/Navbar"; import Icon from "@mdi/react"; import {mdiAccountVoice, mdiArrowLeft, mdiArrowRight, mdiBookOpen, mdiHeadphones, mdiPen} from "@mdi/js"; import {useState} from "react"; import {Module} from "@/interfaces"; import clsx from "clsx"; 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(); const toggleModule = (module: Module) => { const modules = selectedModules.filter((x) => x !== module); setSelectedModules((prev) => (prev.includes(module) ? modules : [...modules, module])); }; return ( <> Create Next App
{/* //TODO: Change this section to work with the user account */}
toggleModule("reading")} className={clsx( "flex flex-col gap-2 items-center justify-center", "border-ielts-reading hover:bg-ielts-reading text-white", "border-2 rounded-xl p-4 h-fit w-48 cursor-pointer", selectedModules.includes("reading") ? "bg-ielts-reading " : "bg-ielts-reading-transparent ", )}> Reading
toggleModule("listening")} className={clsx( "flex flex-col gap-2 items-center justify-center", "border-ielts-listening hover:bg-ielts-listening text-white", "border-2 rounded-xl p-4 h-fit w-48 cursor-pointer", selectedModules.includes("listening") ? "bg-ielts-listening " : "bg-ielts-listening-transparent ", )}> Listening
toggleModule("speaking")} className={clsx( "flex flex-col gap-2 items-center justify-center", "border-ielts-speaking hover:bg-ielts-speaking text-white", "border-2 rounded-xl p-4 h-fit w-48 cursor-pointer", selectedModules.includes("speaking") ? "bg-ielts-speaking " : "bg-ielts-speaking-transparent ", )}> Speaking
toggleModule("writing")} className={clsx( "flex flex-col gap-2 items-center justify-center", "border-ielts-writing hover:bg-ielts-writing text-white", "border-2 rounded-xl p-4 h-fit w-48 cursor-pointer", selectedModules.includes("writing") ? "bg-ielts-writing " : "bg-ielts-writing-transparent ", )}> Writing
); }