Created a quick demo home page for a user

2023-03-03 09:18:03 +00:00
parent d76d454e83
commit d3dd1c4ccd
9 changed files with 165 additions and 119 deletions
--- a/package.json
+++ b/package.json
@@ -15,6 +15,8 @@
    "@types/node": "18.13.0",
    "@types/react": "18.0.27",
    "@types/react-dom": "18.0.10",
+    "chart.js": "^4.2.1",
+    "clsx": "^1.2.1",
    "daisyui": "^2.50.0",
    "eslint": "8.33.0",
    "eslint-config-next": "13.1.6",
@@ -22,6 +24,7 @@
    "lodash": "^4.17.21",
    "next": "13.1.6",
    "react": "18.2.0",
+    "react-chartjs-2": "^5.2.0",
    "react-dom": "18.2.0",
    "typescript": "4.9.5"
  },
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -0,0 +1,36 @@
+/* eslint-disable @next/next/no-img-element */
+export default function Navbar() {
+	return (
+		<div className="navbar bg-base-100">
+			<div className="flex-1">
+				<a className="btn btn-ghost normal-case text-xl">IELTS GPT</a>
+			</div>
+			<div className="flex-none gap-2">
+				<div className="form-control">
+					<input type="text" placeholder="Search" className="input input-bordered" />
+				</div>
+				<div className="dropdown dropdown-end">
+					<label tabIndex={0} className="btn btn-ghost btn-circle avatar">
+						<div className="w-10 rounded-full">
+							<img src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg" alt="Profile picture" />
+						</div>
+					</label>
+					<ul tabIndex={0} className="mt-3 p-2 shadow menu menu-compact dropdown-content bg-base-100 rounded-box w-52">
+						<li>
+							<a className="justify-between">
+								Profile
+								<span className="badge">New</span>
+							</a>
+						</li>
+						<li>
+							<a>Settings</a>
+						</li>
+						<li>
+							<a>Logout</a>
+						</li>
+					</ul>
+				</div>
+			</div>
+		</div>
+	);
+}
--- a/src/components/UserResultChart.tsx
+++ b/src/components/UserResultChart.tsx
@@ -0,0 +1,36 @@
+import {Module} from "@/interfaces";
+import {UserResults} from "@/interfaces/results";
+import {moduleLabels} from "@/utils/moduleUtils";
+import {Chart as ChartJS, RadialLinearScale, ArcElement, Tooltip, Legend} from "chart.js";
+import clsx from "clsx";
+import {PolarArea} from "react-chartjs-2";
+
+interface Props {
+	results: UserResults;
+	resultKey: "score" | "total";
+	label: string;
+	className?: string;
+}
+
+ChartJS.register(RadialLinearScale, ArcElement, Tooltip, Legend);
+
+export default function UserResultChart({results, resultKey, label, className = ""}: Props) {
+	const labels = Object.keys(results).map((key) => moduleLabels[key as Module]);
+	const data = {
+		labels,
+		datasets: [
+			{
+				label,
+				data: Object.keys(results).map((module) => results[module as Module][resultKey]),
+				backgroundColor: ["rgba(255, 99, 132, 0.5)", "rgba(54, 162, 235, 0.5)", "rgba(255, 206, 86, 0.5)", "rgba(75, 192, 192, 0.5)"],
+			},
+		],
+	};
+
+	return (
+		<div className={clsx("flex flex-col gap-4 items-center", className)}>
+			<PolarArea data={data} options={{plugins: {title: {text: label, display: true}}}} />
+			<h2 className="text-neutral-600 font-semibold text-lg">{label}</h2>
+		</div>
+	);
+}
--- a/src/demo/user_results.json
+++ b/src/demo/user_results.json
@@ -0,0 +1,18 @@
+{
+  "reading": {
+    "total": 12,
+    "score": 75
+  },
+  "listening": {
+    "total": 14,
+    "score": 85
+  },
+  "writing": {
+    "total": 4,
+    "score": 60
+  },
+  "speaking": {
+    "total": 3,
+    "score": 91
+  }
+}
--- a/src/interfaces/index.ts
+++ b/src/interfaces/index.ts
@@ -0,0 +1 @@
+export type Module = "reading" | "listening" | "writing" | "speaking";
--- a/src/interfaces/results.ts
+++ b/src/interfaces/results.ts
@@ -0,0 +1,8 @@
+import {Module} from "@/interfaces";
+
+export type UserResults = {[key in Module]: ModuleResult};
+
+interface ModuleResult {
+	score: number;
+	total: number;
+}
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,123 +1,37 @@
-import Head from 'next/head'
-import Image from 'next/image'
-import { Inter } from '@next/font/google'
-import styles from '@/styles/Home.module.css'
+import Head from "next/head";
+import Image from "next/image";
+import {Inter} from "@next/font/google";
+import styles from "@/styles/Home.module.css";
+import UserResultChart from "@/components/UserResultChart";
+import JSON_RESULTS from "@/demo/user_results.json";
+import Navbar from "@/components/Navbar";
+import Icon from "@mdi/react";
+import {mdiPlus} from "@mdi/js";

-const inter = Inter({ subsets: ['latin'] })
+const inter = Inter({subsets: ["latin"]});

 export default function Home() {
-  return (
-    <>
-      <Head>
-        <title>Create Next App</title>
-        <meta name="description" content="Generated by create next app" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
-      <main className={styles.main}>
-        <div className={styles.description}>
-          <p>
-            Get started by editing&nbsp;
-            <code className={styles.code}>src/pages/index.tsx</code>
-          </p>
-          <div>
-            <a
-              href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              By{' '}
-              <Image
-                src="/vercel.svg"
-                alt="Vercel Logo"
-                className={styles.vercelLogo}
-                width={100}
-                height={24}
-                priority
-              />
-            </a>
-          </div>
-        </div>
-
-        <div className={styles.center}>
-          <Image
-            className={styles.logo}
-            src="/next.svg"
-            alt="Next.js Logo"
-            width={180}
-            height={37}
-            priority
-          />
-          <div className={styles.thirteen}>
-            <Image
-              src="/thirteen.svg"
-              alt="13"
-              width={40}
-              height={31}
-              priority
-            />
-          </div>
-        </div>
-
-        <div className={styles.grid}>
-          <a
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-            className={styles.card}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <h2 className={inter.className}>
-              Docs <span>-&gt;</span>
-            </h2>
-            <p className={inter.className}>
-              Find in-depth information about Next.js features and&nbsp;API.
-            </p>
-          </a>
-
-          <a
-            href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-            className={styles.card}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <h2 className={inter.className}>
-              Learn <span>-&gt;</span>
-            </h2>
-            <p className={inter.className}>
-              Learn about Next.js in an interactive course with&nbsp;quizzes!
-            </p>
-          </a>
-
-          <a
-            href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-            className={styles.card}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <h2 className={inter.className}>
-              Templates <span>-&gt;</span>
-            </h2>
-            <p className={inter.className}>
-              Discover and deploy boilerplate example Next.js&nbsp;projects.
-            </p>
-          </a>
-
-          <a
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-            className={styles.card}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <h2 className={inter.className}>
-              Deploy <span>-&gt;</span>
-            </h2>
-            <p className={inter.className}>
-              Instantly deploy your Next.js site to a shareable URL
-              with&nbsp;Vercel.
-            </p>
-          </a>
-        </div>
-      </main>
-    </>
-  )
+	return (
+		<>
+			<Head>
+				<title>Create Next App</title>
+				<meta name="description" content="Generated by create next app" />
+				<meta name="viewport" content="width=device-width, initial-scale=1" />
+				<link rel="icon" href="/favicon.ico" />
+			</Head>
+			<main className="w-full h-screen flex flex-col items-center">
+				<Navbar />
+				<div className="w-full h-full p-4 relative">
+					<button className="btn gap-2 right-4 absolute">
+						<Icon path={mdiPlus} color="white" size={1} />
+						New Exam
+					</button>
+					<section className="h-full w-full grid grid-cols-2 place-items-center">
+						<UserResultChart results={JSON_RESULTS} resultKey="score" label="User results" className="w-5/6" />
+						<UserResultChart results={JSON_RESULTS} resultKey="total" label="Total exams" className="w-5/6" />
+					</section>
+				</div>
+			</main>
+		</>
+	);
 }
--- a/src/utils/moduleUtils.ts
+++ b/src/utils/moduleUtils.ts
@@ -0,0 +1,8 @@
+import {Module} from "@/interfaces";
+
+export const moduleLabels: {[key in Module]: string} = {
+	listening: "Listening",
+	reading: "Reading",
+	speaking: "Speaking",
+	writing: "Writing",
+};
--- a/yarn.lock
+++ b/yarn.lock
@@ -55,6 +55,11 @@
  resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
  integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==

+"@kurkle/color@^0.3.0":
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/@kurkle/color/-/color-0.3.2.tgz#5acd38242e8bde4f9986e7913c8fdf49d3aa199f"
+  integrity sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==
+
 "@mdi/js@^7.1.96":
  version "7.1.96"
  resolved "https://registry.yarnpkg.com/@mdi/js/-/js-7.1.96.tgz#9c5a7f8a20ea63c03b09a0dba1768fe8b70eeaf9"
@@ -555,6 +560,13 @@ chalk@^4.0.0:
    ansi-styles "^4.1.0"
    supports-color "^7.1.0"

+chart.js@^4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-4.2.1.tgz#d2bd5c98e9a0ae35408975b638f40513b067ba1d"
+  integrity sha512-6YbpQ0nt3NovAgOzbkSSeeAQu/3za1319dPUQTXn9WcOpywM8rGKxJHrhS8V8xEkAlk8YhEfjbuAPfUyp6jIsw==
+  dependencies:
+    "@kurkle/color" "^0.3.0"
+
 chokidar@^3.5.3:
  version "3.5.3"
  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
@@ -575,6 +587,11 @@ client-only@0.0.1:
  resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1"
  integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==

+clsx@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
+  integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
+
 color-convert@^2.0.1:
  version "2.0.1"
  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
@@ -2034,6 +2051,11 @@ quick-lru@^5.1.1:
  resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-5.1.1.tgz#366493e6b3e42a3a6885e2e99d18f80fb7a8c932"
  integrity sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==

+react-chartjs-2@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/react-chartjs-2/-/react-chartjs-2-5.2.0.tgz#43c1e3549071c00a1a083ecbd26c1ad34d385f5d"
+  integrity sha512-98iN5aguJyVSxp5U3CblRLH67J8gkfyGNbiK3c+l1QI/G4irHMPQw44aEPmjVag+YKTyQ260NcF82GTQ3bdscA==
+
 react-dom@18.2.0:
  version "18.2.0"
  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
				`@@ -0,0 +1 @@`
				`export type Module = "reading" \| "listening" \| "writing" \| "speaking";`