devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Created a quick demo home page for a user

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-03-03 09:18:03 +00:00
parent d76d454e83
commit d3dd1c4ccd
9 changed files with 165 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/Navbar.tsx Normal file
View File

@@ -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>
);
}

36
src/components/UserResultChart.tsx Normal file
View File

@@ -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>
);
}

18
src/demo/user_results.json Normal file
View File

@@ -0,0 +1,18 @@
{
"reading": {
"total": 12,
"score": 75
},
"listening": {
"total": 14,
"score": 85
},
"writing": {
"total": 4,
"score": 60
},
"speaking": {
"total": 3,
"score": 91
}
}

1
src/interfaces/index.ts Normal file
View File

@@ -0,0 +1 @@
export type Module = "reading" | "listening" | "writing" | "speaking";

8
src/interfaces/results.ts Normal file
View File

@@ -0,0 +1,8 @@
import {Module} from "@/interfaces";
export type UserResults = {[key in Module]: ModuleResult};
interface ModuleResult {
score: number;
total: number;
}

152
src/pages/index.tsx
View File

@@ -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>
</>
);
}

8
src/utils/moduleUtils.ts Normal file
View File

@@ -0,0 +1,8 @@
import {Module} from "@/interfaces";
export const moduleLabels: {[key in Module]: string} = {
listening: "Listening",
reading: "Reading",
speaking: "Speaking",
writing: "Writing",
};