Hooked training content to backend, did refactors to training components and record.tsx
This commit is contained in:
Carlos Mesquita
24
src/components/ModuleBadge.tsx
Normal file
24
src/components/ModuleBadge.tsx
Normal file
@@ -0,0 +1,24 @@
|
||||
import clsx from "clsx";
|
||||
import { BsBook, BsClipboard, BsHeadphones, BsMegaphone, BsPen } from "react-icons/bs";
|
||||
|
||||
const ModuleBadge: React.FC<{ module: string; level?: number }> = ({ module, level }) => (
|
||||
<div
|
||||
className={clsx(
|
||||
"flex gap-2 items-center w-fit text-white -md:px-4 xl:px-4 md:px-2 py-2 rounded-xl",
|
||||
module === "reading" && "bg-ielts-reading",
|
||||
module === "listening" && "bg-ielts-listening",
|
||||
module === "writing" && "bg-ielts-writing",
|
||||
module === "speaking" && "bg-ielts-speaking",
|
||||
module === "level" && "bg-ielts-level",
|
||||
)}>
|
||||
{module === "reading" && <BsBook className="w-4 h-4" />}
|
||||
{module === "listening" && <BsHeadphones className="w-4 h-4" />}
|
||||
{module === "writing" && <BsPen className="w-4 h-4" />}
|
||||
{module === "speaking" && <BsMegaphone className="w-4 h-4" />}
|
||||
{module === "level" && <BsClipboard className="w-4 h-4" />}
|
||||
{/* do not switch to level && it will convert the 0.0 to 0*/}
|
||||
{level !== undefined && (<span className="text-sm">{level.toFixed(1)}</span>)}
|
||||
</div>
|
||||
);
|
||||
|
||||
export default ModuleBadge;
|
||||
256
src/components/StatGridItem.tsx
Normal file
256
src/components/StatGridItem.tsx
Normal file
@@ -0,0 +1,256 @@
|
||||
import React from 'react';
|
||||
import { BsClock, BsXCircle } from 'react-icons/bs';
|
||||
import clsx from 'clsx';
|
||||
import { Stat, User } from '@/interfaces/user';
|
||||
import { Module } from "@/interfaces";
|
||||
import ai_usage from "@/utils/ai.detection";
|
||||
import { calculateBandScore } from "@/utils/score";
|
||||
import moment from 'moment';
|
||||
import { Assignment } from '@/interfaces/results';
|
||||
import { uuidv4 } from "@firebase/util";
|
||||
import { useRouter } from "next/router";
|
||||
import { uniqBy } from "lodash";
|
||||
import { sortByModule } from "@/utils/moduleUtils";
|
||||
import { convertToUserSolutions } from "@/utils/stats";
|
||||
import { getExamById } from "@/utils/exams";
|
||||
import { Exam, UserSolution } from '@/interfaces/exam';
|
||||
import ModuleBadge from './ModuleBadge';
|
||||
|
||||
const formatTimestamp = (timestamp: string | number) => {
|
||||
const time = typeof timestamp === "string" ? parseInt(timestamp) : timestamp;
|
||||
const date = moment(time);
|
||||
const formatter = "YYYY/MM/DD - HH:mm";
|
||||
return date.format(formatter);
|
||||
};
|
||||
|
||||
const aggregateScoresByModule = (stats: Stat[]): { module: Module; total: number; missing: number; correct: number }[] => {
|
||||
const scores: {
|
||||
[key in Module]: { total: number; missing: number; correct: number };
|
||||
} = {
|
||||
reading: {
|
||||
total: 0,
|
||||
correct: 0,
|
||||
missing: 0,
|
||||
},
|
||||
listening: {
|
||||
total: 0,
|
||||
correct: 0,
|
||||
missing: 0,
|
||||
},
|
||||
writing: {
|
||||
total: 0,
|
||||
correct: 0,
|
||||
missing: 0,
|
||||
},
|
||||
speaking: {
|
||||
total: 0,
|
||||
correct: 0,
|
||||
missing: 0,
|
||||
},
|
||||
level: {
|
||||
total: 0,
|
||||
correct: 0,
|
||||
missing: 0,
|
||||
},
|
||||
};
|
||||
|
||||
stats.forEach((x) => {
|
||||
scores[x.module!] = {
|
||||
total: scores[x.module!].total + x.score.total,
|
||||
correct: scores[x.module!].correct + x.score.correct,
|
||||
missing: scores[x.module!].missing + x.score.missing,
|
||||
};
|
||||
});
|
||||
|
||||
return Object.keys(scores)
|
||||
.filter((x) => scores[x as Module].total > 0)
|
||||
.map((x) => ({ module: x as Module, ...scores[x as Module] }));
|
||||
};
|
||||
|
||||
interface StatsGridItemProps {
|
||||
stats: Stat[];
|
||||
timestamp: string | number;
|
||||
user: User,
|
||||
assignments: Assignment[];
|
||||
users: User[];
|
||||
training?: boolean,
|
||||
selectedTrainingExams?: string[];
|
||||
setSelectedTrainingExams?: React.Dispatch<React.SetStateAction<string[]>>;
|
||||
setExams: (exams: Exam[]) => void;
|
||||
setShowSolutions: (show: boolean) => void;
|
||||
setUserSolutions: (solutions: UserSolution[]) => void;
|
||||
setSelectedModules: (modules: Module[]) => void;
|
||||
setInactivity: (inactivity: number) => void;
|
||||
setTimeSpent: (time: number) => void;
|
||||
renderPdfIcon: (session: string, color: string, textColor: string) => React.ReactNode;
|
||||
}
|
||||
|
||||
const StatsGridItem: React.FC<StatsGridItemProps> = ({
|
||||
stats,
|
||||
timestamp,
|
||||
user,
|
||||
assignments,
|
||||
users,
|
||||
training,
|
||||
selectedTrainingExams,
|
||||
setSelectedTrainingExams,
|
||||
setExams,
|
||||
setShowSolutions,
|
||||
setUserSolutions,
|
||||
setSelectedModules,
|
||||
setInactivity,
|
||||
setTimeSpent,
|
||||
renderPdfIcon
|
||||
}) => {
|
||||
const router = useRouter();
|
||||
const correct = stats.reduce((accumulator, current) => accumulator + current.score.correct, 0);
|
||||
const total = stats.reduce((accumulator, current) => accumulator + current.score.total, 0);
|
||||
const aggregatedScores = aggregateScoresByModule(stats).filter((x) => x.total > 0);
|
||||
const assignmentID = stats.reduce((_, current) => current.assignment as any, "");
|
||||
const assignment = assignments.find((a) => a.id === assignmentID);
|
||||
const isDisabled = stats.some((x) => x.isDisabled);
|
||||
|
||||
const aiUsage = Math.round(ai_usage(stats) * 100);
|
||||
|
||||
const aggregatedLevels = aggregatedScores.map((x) => ({
|
||||
module: x.module,
|
||||
level: calculateBandScore(x.correct, x.total, x.module, user.focus),
|
||||
}));
|
||||
|
||||
const textColor = clsx(
|
||||
correct / total >= 0.7 && "text-mti-purple",
|
||||
correct / total >= 0.3 && correct / total < 0.7 && "text-mti-red",
|
||||
correct / total < 0.3 && "text-mti-rose",
|
||||
);
|
||||
|
||||
const { timeSpent, inactivity, session } = stats[0];
|
||||
|
||||
const selectExam = () => {
|
||||
if (training && !isDisabled && typeof setSelectedTrainingExams !== "undefined" && typeof timestamp == "string") {
|
||||
setSelectedTrainingExams(prevExams => {
|
||||
const index = prevExams.indexOf(timestamp);
|
||||
|
||||
if (index !== -1) {
|
||||
const newExams = [...prevExams];
|
||||
newExams.splice(index, 1);
|
||||
return newExams;
|
||||
} else {
|
||||
return [...prevExams, timestamp];
|
||||
}
|
||||
});
|
||||
} else {
|
||||
const examPromises = uniqBy(stats, "exam").map((stat) => {
|
||||
return getExamById(stat.module, stat.exam);
|
||||
});
|
||||
|
||||
if (isDisabled) return;
|
||||
|
||||
Promise.all(examPromises).then((exams) => {
|
||||
if (exams.every((x) => !!x)) {
|
||||
if (!!timeSpent) setTimeSpent(timeSpent);
|
||||
if (!!inactivity) setInactivity(inactivity);
|
||||
setUserSolutions(convertToUserSolutions(stats));
|
||||
setShowSolutions(true);
|
||||
setExams(exams.map((x) => x!).sort(sortByModule));
|
||||
setSelectedModules(
|
||||
exams
|
||||
.map((x) => x!)
|
||||
.sort(sortByModule)
|
||||
.map((x) => x!.module),
|
||||
);
|
||||
router.push("/exercises");
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const content = (
|
||||
<>
|
||||
<div className="w-full flex justify-between -md:items-center 2xl:items-center">
|
||||
<div className="flex flex-col md:gap-1 -md:gap-2 2xl:gap-2">
|
||||
<span className="font-medium">{formatTimestamp(timestamp)}</span>
|
||||
<div className="flex items-center gap-2">
|
||||
{!!timeSpent && (
|
||||
<span className="text-sm flex gap-2 items-center tooltip" data-tip="Time Spent">
|
||||
<BsClock /> {Math.floor(timeSpent / 60)} minutes
|
||||
</span>
|
||||
)}
|
||||
{!!inactivity && (
|
||||
<span className="text-sm flex gap-2 items-center tooltip" data-tip="Inactivity">
|
||||
<BsXCircle /> {Math.floor(inactivity / 60)} minutes
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="flex flex-row gap-2">
|
||||
<span className={textColor}>
|
||||
Level{" "}
|
||||
{(aggregatedLevels.reduce((accumulator, current) => accumulator + current.level, 0) / aggregatedLevels.length).toFixed(1)}
|
||||
</span>
|
||||
{renderPdfIcon(session, textColor, textColor)}
|
||||
</div>
|
||||
{aiUsage >= 50 && user.type !== "student" && (
|
||||
<div className={clsx(
|
||||
"ml-auto border px-1 rounded w-fit mr-1",
|
||||
{
|
||||
'bg-orange-100 border-orange-400 text-orange-700': aiUsage < 80,
|
||||
'bg-red-100 border-red-400 text-red-700': aiUsage >= 80,
|
||||
}
|
||||
)}>
|
||||
<span className="text-xs">AI Usage</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-full flex flex-col gap-1">
|
||||
<div className="grid grid-cols-4 gap-2 place-items-start w-full -md:mt-2">
|
||||
{aggregatedLevels.map(({ module, level }) => (
|
||||
<ModuleBadge key={module} module={module} level={level} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
{assignment && (
|
||||
<span className="font-light text-sm">
|
||||
Assignment: {assignment.name}, Teacher: {users.find((u) => u.id === assignment.assigner)?.name}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
key={uuidv4()}
|
||||
className={clsx(
|
||||
"flex flex-col justify-between gap-4 border border-mti-gray-platinum p-4 cursor-pointer rounded-xl transition ease-in-out duration-300 -md:hidden",
|
||||
isDisabled && "grayscale tooltip",
|
||||
correct / total >= 0.7 && "hover:border-mti-purple",
|
||||
correct / total >= 0.3 && correct / total < 0.7 && "hover:border-mti-red",
|
||||
correct / total < 0.3 && "hover:border-mti-rose",
|
||||
typeof selectedTrainingExams !== "undefined" && typeof timestamp === "string" && selectedTrainingExams.includes(timestamp) && "border-2 border-slate-600",
|
||||
)}
|
||||
onClick={selectExam}
|
||||
data-tip="This exam is still being evaluated..."
|
||||
role="button">
|
||||
{content}
|
||||
</div>
|
||||
<div
|
||||
key={uuidv4()}
|
||||
className={clsx(
|
||||
"flex flex-col gap-4 border border-mti-gray-platinum p-4 cursor-pointer rounded-xl transition ease-in-out duration-300 -md:tooltip md:hidden",
|
||||
correct / total >= 0.7 && "hover:border-mti-purple",
|
||||
correct / total >= 0.3 && correct / total < 0.7 && "hover:border-mti-red",
|
||||
correct / total < 0.3 && "hover:border-mti-rose",
|
||||
)}
|
||||
data-tip="Your screen size is too small to view previous exams."
|
||||
role="button">
|
||||
{content}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default StatsGridItem;
|
||||
@@ -1,10 +1,10 @@
|
||||
import React, { useState, useCallback } from "react";
|
||||
import ExerciseWalkthrough from "@/training/ExerciseWalkthrough";
|
||||
import { WalkthroughConfigs } from "./TrainingInterfaces";
|
||||
import { ITrainingTip, WalkthroughConfigs } from "./TrainingInterfaces";
|
||||
|
||||
|
||||
// This wrapper is just to test new exercises from the handbook, will be removed when all the tips and exercises are in firestore
|
||||
const TrainingExercise: React.FC = () => {
|
||||
const TrainingExercise: React.FC<ITrainingTip> = (trainingTip: ITrainingTip) => {
|
||||
const leftText = "<div class=\"container mx-auto px-4 overflow-x-auto\"><table class=\"min-w-full bg-white border border-gray-300\"><thead><tr class=\"bg-gray-100\"><th class=\"py-2 px-4 border-b font-semibold text-left\">Category</th><th class=\"py-2 px-4 border-b font-semibold text-left\">Option A</th><th class=\"py-2 px-4 border-b font-semibold text-left\">Option B</th></tr></thead><tbody><tr><td class=\"py-2 px-4 border-b font-medium\">Self</td><td class=\"py-2 px-4 border-b\">You need to take care of yourself and connect with the people around you.</td><td class=\"py-2 px-4 border-b\">Focus on your interests and talents and meet people who are like you.</td></tr><tr class=\"bg-gray-50\"><td class=\"py-2 px-4 border-b font-medium\">Home</td><td class=\"py-2 px-4 border-b\">It's a good idea to paint your living room yellow.</td><td class=\"py-2 px-4 border-b\">You should arrange your home so that it makes you feel happy.</td></tr><tr><td class=\"py-2 px-4 border-b font-medium\">Financial Life</td><td class=\"py-2 px-4 border-b\">You can be happy if you have enough money, but don't want money too much.</td><td class=\"py-2 px-4 border-b\">If you waste money on things you don't need, you won't have enough money for things that you do need.</td></tr><tr class=\"bg-gray-50\"><td class=\"py-2 px-4 border-b font-medium\">Social Life</td><td class=\"py-2 px-4 border-b\">A good group of friends can increase your happiness.</td><td class=\"py-2 px-4 border-b\">Researchers say that a happy friend can increase our mood by nine percent.</td></tr><tr><td class=\"py-2 px-4 border-b font-medium\">Workplace</td><td class=\"py-2 px-4 border-b\">You spend a lot of time at work, so you should like your workplace.</td><td class=\"py-2 px-4 border-b\">Your boss needs to be someone you enjoy working for.</td></tr><tr class=\"bg-gray-50\"><td class=\"py-2 px-4 border-b font-medium\">Community</td><td class=\"py-2 px-4 border-b\">The place where you live is more important for happiness than anything else.</td><td class=\"py-2 px-4 border-b\">Live around people who have the same amount of money as you do.</td></tr></tbody></table></div>";
|
||||
const tip = {
|
||||
category: "Strategy",
|
||||
@@ -68,14 +68,21 @@ const TrainingExercise: React.FC = () => {
|
||||
}
|
||||
]
|
||||
|
||||
const mockTip: ITrainingTip = {
|
||||
id: "some random id",
|
||||
tipCategory: tip.category,
|
||||
tipHtml: tip.body,
|
||||
standalone: false,
|
||||
exercise: {
|
||||
question: question,
|
||||
highlightable: leftText,
|
||||
segments: rightTextData
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen flex-col p-10">
|
||||
<ExerciseWalkthrough
|
||||
question={question}
|
||||
highlightable={leftText}
|
||||
walkthrough={rightTextData}
|
||||
tip={tip}
|
||||
<div className="flex flex-col p-10">
|
||||
<ExerciseWalkthrough {...trainingTip}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -2,24 +2,10 @@ import React, { useState, useEffect, useRef, useCallback } from 'react';
|
||||
import { animated } from '@react-spring/web';
|
||||
import { FaRegCirclePlay, FaRegCircleStop } from "react-icons/fa6";
|
||||
import HighlightedContent from './AnimatedHighlight';
|
||||
import { SegmentRef, TimelineEvent, WalkthroughConfigs } from './TrainingInterfaces';
|
||||
import { ITrainingTip, SegmentRef, TimelineEvent } from './TrainingInterfaces';
|
||||
|
||||
interface ExerciseWalkthroughProps {
|
||||
highlightable: string;
|
||||
walkthrough: WalkthroughConfigs[];
|
||||
question: string;
|
||||
tip: {
|
||||
category: string;
|
||||
body: string;
|
||||
};
|
||||
}
|
||||
|
||||
const ExerciseWalkthrough: React.FC<ExerciseWalkthroughProps> = ({
|
||||
highlightable,
|
||||
walkthrough,
|
||||
question,
|
||||
tip
|
||||
}) => {
|
||||
const ExerciseWalkthrough: React.FC<ITrainingTip> = (tip: ITrainingTip) => {
|
||||
const [isAutoPlaying, setIsAutoPlaying] = useState<boolean>(false);
|
||||
const [currentTime, setCurrentTime] = useState<number>(0);
|
||||
const [walkthroughHtml, setWalkthroughHtml] = useState<string>('');
|
||||
@@ -47,8 +33,9 @@ const ExerciseWalkthrough: React.FC<ExerciseWalkthroughProps> = ({
|
||||
}, []);
|
||||
|
||||
const getMaxTime = (): number => {
|
||||
return walkthrough.reduce((sum, segment) =>
|
||||
sum + segment.wordDelay * segment.html.split(/\s+/).length + segment.holdDelay, 0);
|
||||
return tip.exercise?.segments.reduce((sum, segment) =>
|
||||
sum + segment.wordDelay * segment.html.split(/\s+/).length + segment.holdDelay, 0
|
||||
) ?? 0;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
@@ -56,7 +43,7 @@ const ExerciseWalkthrough: React.FC<ExerciseWalkthroughProps> = ({
|
||||
let currentTimePosition = 0;
|
||||
segmentsRef.current = [];
|
||||
|
||||
walkthrough.forEach((segment, index) => {
|
||||
tip.exercise?.segments.forEach((segment, index) => {
|
||||
const parser = new DOMParser();
|
||||
const doc = parser.parseFromString(segment.html, 'text/html');
|
||||
const words: string[] = [];
|
||||
@@ -99,7 +86,7 @@ const ExerciseWalkthrough: React.FC<ExerciseWalkthroughProps> = ({
|
||||
});
|
||||
|
||||
timelineRef.current = timeline;
|
||||
}, [walkthrough]);
|
||||
}, [tip.exercise?.segments]);
|
||||
|
||||
const updateText = useCallback(() => {
|
||||
const currentEvent = timelineRef.current.find(
|
||||
@@ -231,11 +218,24 @@ const ExerciseWalkthrough: React.FC<ExerciseWalkthroughProps> = ({
|
||||
}
|
||||
};
|
||||
|
||||
if (tip.standalone || !tip.exercise) {
|
||||
return (
|
||||
<div className="container mx-auto">
|
||||
<h1 className='text-xl font-bold text-red-600'>The exercise for this tip is not available yet!</h1>
|
||||
<div className="tip-container bg-blue-100 p-4 rounded-lg shadow-md mb-4 mt-10">
|
||||
<h3 className="text-xl font-semibold text-blue-800 mb-2">{tip.tipCategory}</h3>
|
||||
<div className="text-gray-700" dangerouslySetInnerHTML={{ __html: tip.tipHtml }} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div className="container mx-auto">
|
||||
<div className="tip-container bg-blue-100 p-4 rounded-lg shadow-md mb-4">
|
||||
<h3 className="text-xl font-semibold text-blue-800 mb-2">{tip.category}</h3>
|
||||
<div className="text-gray-700" dangerouslySetInnerHTML={{ __html: tip.body }} />
|
||||
<h3 className="text-xl font-semibold text-blue-800 mb-2">{tip.tipCategory}</h3>
|
||||
<div className="text-gray-700" dangerouslySetInnerHTML={{ __html: tip.tipHtml }} />
|
||||
</div>
|
||||
<div className='flex flex-col space-y-4'>
|
||||
<div className='flex flex-row items-center space-x-4 py-4'>
|
||||
@@ -266,8 +266,8 @@ const ExerciseWalkthrough: React.FC<ExerciseWalkthroughProps> = ({
|
||||
<div className='flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4'>
|
||||
<div className='flex-1 bg-white p-6 rounded-lg shadow'>
|
||||
{/*<h2 className="text-xl font-bold mb-4">Question</h2>*/}
|
||||
<div className="mb-4" dangerouslySetInnerHTML={{ __html: question }} />
|
||||
<HighlightedContent html={highlightable} highlightPhrases={highlightedPhrases} />
|
||||
<div className="mb-4" dangerouslySetInnerHTML={{ __html: tip.exercise.question }} />
|
||||
<HighlightedContent html={tip.exercise.highlightable} highlightPhrases={highlightedPhrases} />
|
||||
</div>
|
||||
<div className='flex-1'>
|
||||
<div className='bg-gray-50 rounded-lg shadow'>
|
||||
|
||||
@@ -1,14 +1,20 @@
|
||||
import { Stat } from "@/interfaces/user";
|
||||
|
||||
export interface ITrainingContent {
|
||||
id: string;
|
||||
created_at: number;
|
||||
exams: {
|
||||
id: string;
|
||||
date: number;
|
||||
detailed_summary: string;
|
||||
performance_comment: string;
|
||||
score: string;
|
||||
stat_ids: string[]
|
||||
score: number;
|
||||
module: string;
|
||||
stat_ids: string[];
|
||||
stats?: Stat[];
|
||||
}[];
|
||||
tip_ids: string[];
|
||||
tips?: ITrainingTip[];
|
||||
weak_areas: {
|
||||
area: string;
|
||||
comment: string;
|
||||
@@ -20,7 +26,7 @@ export interface ITrainingTip {
|
||||
tipCategory: string;
|
||||
tipHtml: string;
|
||||
standalone: boolean;
|
||||
exercise: {
|
||||
exercise?: {
|
||||
question: string;
|
||||
highlightable: string;
|
||||
segments: WalkthroughConfigs[]
|
||||
|
||||
90
src/components/TrainingContent/TrainingScore.tsx
Normal file
90
src/components/TrainingContent/TrainingScore.tsx
Normal file
@@ -0,0 +1,90 @@
|
||||
import React from 'react';
|
||||
import { RiArrowRightUpLine, RiArrowLeftDownLine } from 'react-icons/ri';
|
||||
import { FaChartLine } from 'react-icons/fa';
|
||||
import { GiLightBulb } from 'react-icons/gi';
|
||||
import clsx from 'clsx';
|
||||
import { ITrainingContent } from './TrainingInterfaces';
|
||||
|
||||
interface TrainingScoreProps {
|
||||
trainingContent: ITrainingContent
|
||||
gridView: boolean;
|
||||
}
|
||||
|
||||
const TrainingScore: React.FC<TrainingScoreProps> = ({
|
||||
trainingContent,
|
||||
gridView
|
||||
}) => {
|
||||
const scores = trainingContent.exams.map(exam => exam.score);
|
||||
const highestScore = Math.max(...scores);
|
||||
const lowestScore = Math.min(...scores);
|
||||
const averageScore = scores.length > 0
|
||||
? scores.reduce((sum, score) => sum + score, 0) / scores.length
|
||||
: 0;
|
||||
|
||||
const containerClasses = clsx(
|
||||
"flex flex-row mb-4",
|
||||
gridView ? "gap-4 justify-between" : "gap-8"
|
||||
);
|
||||
|
||||
const columnClasses = clsx(
|
||||
"flex flex-col",
|
||||
gridView ? "gap-4" : "gap-8"
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={containerClasses}>
|
||||
<div className={columnClasses}>
|
||||
<div className="flex flex-row items-center gap-4">
|
||||
<div className="flex w-14 h-14 bg-[#F5F5F5] items-center justify-center rounded-xl border border-[#DBDBDB]">
|
||||
<svg width="20" height="20" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.7083 3.16669C11.4166 3.16669 11.1701 3.06599 10.9687 2.8646C10.7673 2.66321 10.6666 2.41669 10.6666 2.12502C10.6666 1.83335 10.7673 1.58683 10.9687 1.38544C11.1701 1.18405 11.4166 1.08335 11.7083 1.08335C12 1.08335 12.2465 1.18405 12.4479 1.38544C12.6493 1.58683 12.75 1.83335 12.75 2.12502C12.75 2.41669 12.6493 2.66321 12.4479 2.8646C12.2465 3.06599 12 3.16669 11.7083 3.16669ZM11.7083 16.9167C11.4166 16.9167 11.1701 16.816 10.9687 16.6146C10.7673 16.4132 10.6666 16.1667 10.6666 15.875C10.6666 15.5834 10.7673 15.3368 10.9687 15.1354C11.1701 14.934 11.4166 14.8334 11.7083 14.8334C12 14.8334 12.2465 14.934 12.4479 15.1354C12.6493 15.3368 12.75 15.5834 12.75 15.875C12.75 16.1667 12.6493 16.4132 12.4479 16.6146C12.2465 16.816 12 16.9167 11.7083 16.9167ZM15.0416 6.08335C14.75 6.08335 14.5034 5.98266 14.302 5.78127C14.1007 5.57988 14 5.33335 14 5.04169C14 4.75002 14.1007 4.50349 14.302 4.3021C14.5034 4.10071 14.75 4.00002 15.0416 4.00002C15.3333 4.00002 15.5798 4.10071 15.7812 4.3021C15.9826 4.50349 16.0833 4.75002 16.0833 5.04169C16.0833 5.33335 15.9826 5.57988 15.7812 5.78127C15.5798 5.98266 15.3333 6.08335 15.0416 6.08335ZM15.0416 14C14.75 14 14.5034 13.8993 14.302 13.6979C14.1007 13.4965 14 13.25 14 12.9584C14 12.6667 14.1007 12.4202 14.302 12.2188C14.5034 12.0174 14.75 11.9167 15.0416 11.9167C15.3333 11.9167 15.5798 12.0174 15.7812 12.2188C15.9826 12.4202 16.0833 12.6667 16.0833 12.9584C16.0833 13.25 15.9826 13.4965 15.7812 13.6979C15.5798 13.8993 15.3333 14 15.0416 14ZM16.2916 10.0417C16 10.0417 15.7534 9.94099 15.552 9.7396C15.3507 9.53821 15.25 9.29169 15.25 9.00002C15.25 8.70835 15.3507 8.46183 15.552 8.26044C15.7534 8.05905 16 7.95835 16.2916 7.95835C16.5833 7.95835 16.8298 8.05905 17.0312 8.26044C17.2326 8.46183 17.3333 8.70835 17.3333 9.00002C17.3333 9.29169 17.2326 9.53821 17.0312 9.7396C16.8298 9.94099 16.5833 10.0417 16.2916 10.0417ZM8.99996 17.3334C7.84718 17.3334 6.76385 17.1146 5.74996 16.6771C4.73607 16.2396 3.85413 15.6459 3.10413 14.8959C2.35413 14.1459 1.76038 13.2639 1.32288 12.25C0.885376 11.2361 0.666626 10.1528 0.666626 9.00002C0.666626 7.84724 0.885376 6.76391 1.32288 5.75002C1.76038 4.73613 2.35413 3.85419 3.10413 3.10419C3.85413 2.35419 4.73607 1.76044 5.74996 1.32294C6.76385 0.885437 7.84718 0.666687 8.99996 0.666687V2.33335C7.13885 2.33335 5.56246 2.97919 4.27079 4.27085C2.97913 5.56252 2.33329 7.13891 2.33329 9.00002C2.33329 10.8611 2.97913 12.4375 4.27079 13.7292C5.56246 15.0209 7.13885 15.6667 8.99996 15.6667V17.3334ZM8.99996 10.6667C8.54163 10.6667 8.14927 10.5035 7.82288 10.1771C7.49649 9.85071 7.33329 9.45835 7.33329 9.00002C7.33329 8.93058 7.33676 8.85766 7.34371 8.78127C7.35065 8.70488 7.36801 8.63196 7.39579 8.56252L5.66663 6.83335L6.83329 5.66669L8.56246 7.39585C8.61801 7.38196 8.76385 7.36113 8.99996 7.33335C9.45829 7.33335 9.85065 7.49655 10.177 7.82294C10.5034 8.14933 10.6666 8.54169 10.6666 9.00002C10.6666 9.45835 10.5034 9.85071 10.177 10.1771C9.85065 10.5035 9.45829 10.6667 8.99996 10.6667Z" fill="#40A1EA" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<p className="font-bold">{trainingContent.exams.length}</p>
|
||||
<p>Exams Selected</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-row items-center gap-4">
|
||||
<div className="flex w-14 h-14 bg-[#F5F5F5] items-center justify-center rounded-xl border border-[#DBDBDB]">
|
||||
<RiArrowRightUpLine color={"#22E1B3"} size={gridView ? 28 : 26} />
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<p className="font-bold">{highestScore}%</p>
|
||||
<p>Highest Score</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={columnClasses}>
|
||||
<div className="flex flex-row items-center gap-4">
|
||||
<div className="flex w-14 h-14 bg-[#F5F5F5] items-center justify-center rounded-xl border border-[#DBDBDB]">
|
||||
<FaChartLine color={"#40A1EA"} size={gridView ? 24 : 26} />
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<p className="font-bold">{averageScore}%</p>
|
||||
<p>Average Score</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-row items-center gap-4">
|
||||
<div className="flex w-14 h-14 bg-[#F5F5F5] items-center justify-center rounded-xl border border-[#DBDBDB]">
|
||||
<RiArrowLeftDownLine color={"#E13922"} size={gridView ? 28 : 26} />
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<p className="font-bold">{lowestScore}%</p>
|
||||
<p>Lowest Score</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{gridView && (
|
||||
<div className="flex flex-col items-center justify-center gap-2">
|
||||
<div className="flex w-14 h-14 bg-[#F5F5F5] items-center justify-center rounded-xl border border-[#DBDBDB]">
|
||||
<GiLightBulb color={"#FFCC00"} size={28} />
|
||||
</div>
|
||||
<p><span className="font-bold">{trainingContent.tip_ids.length}</span> Tips</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TrainingScore;
|
||||
Reference in New Issue
Block a user