Updated the FillBlanks exercise and solution to the new design

src/components/Exercises/FillBlanks.tsx

@@ -4,75 +4,81 @@ import {Dialog, Transition} from "@headlessui/react";
 import {mdiArrowLeft, mdiArrowRight} from "@mdi/js";
 import Icon from "@mdi/react";
 import clsx from "clsx";
-import {Fragment, useState} from "react";
+import {Fragment, useEffect, useState} from "react";
 import reactStringReplace from "react-string-replace";
 import {CommonProps} from ".";
+import Button from "../Low/Button";
 
-interface WordsPopoutProps {
+interface WordsDrawerProps {
 	words: {word: string; isDisabled: boolean}[];
 	isOpen: boolean;
+	blankId?: string;
+	previouslySelectedWord?: string;
 	onCancel: () => void;
 	onAnswer: (answer: string) => void;
 }
 
-function WordsPopout({words, isOpen, onCancel, onAnswer}: WordsPopoutProps) {
+function WordsDrawer({words, isOpen, blankId, previouslySelectedWord, onCancel, onAnswer}: WordsDrawerProps) {
+	const [selectedWord, setSelectedWord] = useState<string | undefined>(previouslySelectedWord);
+
+	useEffect(() => setSelectedWord(previouslySelectedWord), [previouslySelectedWord]);
+
 	return (
-		<Transition appear show={isOpen} as={Fragment}>
-			<Dialog as="div" className="relative z-10" onClose={onCancel}>
-				<Transition.Child
-					as={Fragment}
-					enter="ease-out duration-300"
-					enterFrom="opacity-0"
-					enterTo="opacity-100"
-					leave="ease-in duration-200"
-					leaveFrom="opacity-100"
-					leaveTo="opacity-0">
-					<div className="fixed inset-0 bg-black bg-opacity-25" />
-				</Transition.Child>
-
-				<div className="fixed inset-0 overflow-y-auto">
-					<div className="flex min-h-full items-center justify-center p-4 text-center">
-						<Transition.Child
-							as={Fragment}
-							enter="ease-out duration-300"
-							enterFrom="opacity-0 scale-95"
-							enterTo="opacity-100 scale-100"
-							leave="ease-in duration-200"
-							leaveFrom="opacity-100 scale-100"
-							leaveTo="opacity-0 scale-95">
-							<Dialog.Panel className="w-fit transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all flex flex-col">
-								<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
-									List of words
-								</Dialog.Title>
-								<div className="mt-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-									{words.map((word) => (
-										<button
-											key={word.word}
-											onClick={() => onAnswer(word.word)}
-											disabled={word.isDisabled}
-											className={clsx("btn sm:btn-wide gap-4 relative text-white", infoButtonStyle)}>
-											{word.word}
-										</button>
-									))}
-								</div>
-
-								<div className="mt-4 self-end">
-									<button onClick={onCancel} className={clsx("btn md:btn-wide gap-4 relative text-white", errorButtonStyle)}>
-										Close
-									</button>
-								</div>
-							</Dialog.Panel>
-						</Transition.Child>
-					</div>
+		<>
+			<div
+				className={clsx(
+					"w-full h-full absolute top-0 left-0 bg-gradient-to-t from-mti-black to-transparent z-10",
+					isOpen ? "visible opacity-10" : "invisible opacity-0",
+				)}
+			/>
+			<div
+				className={clsx(
+					"absolute w-full bg-white px-7 py-8 bottom-0 left-0 shadow-2xl rounded-2xl z-20 flex flex-col gap-8 transition-opacity duration-300 ease-in-out",
+					isOpen ? "visible opacity-100" : "invisible opacity-0",
+				)}>
+				<div className="w-full flex gap-2">
+					<div className="rounded-full w-6 h-6 flex items-center justify-center text-white bg-mti-green-light">{blankId}</div>
+					<span> Choose the correct word:</span>
 				</div>
-			</Dialog>
-		</Transition>
+				<div className="grid grid-cols-6 gap-6">
+					{words.map(({word, isDisabled}) => (
+						<button
+							key={word}
+							onClick={() => setSelectedWord((prev) => (prev === word ? undefined : word))}
+							className={clsx(
+								"rounded-full py-3 text-center transition duration-300 ease-in-out",
+								selectedWord === word ? "text-white bg-mti-green-light" : "bg-mti-green-ultralight",
+								!isDisabled && "hover:text-white hover:bg-mti-green",
+								"disabled:cursor-not-allowed disabled:text-mti-gray-dim",
+							)}
+							disabled={isDisabled}>
+							{word}
+						</button>
+					))}
+				</div>
+				<div className="flex justify-between w-full">
+					<Button color="green" variant="outline" className="max-w-[200px] w-full" onClick={onCancel}>
+						Back
+					</Button>
+					<Button color="green" className="max-w-[200px] w-full" onClick={() => onAnswer(selectedWord!)} disabled={!selectedWord}>
+						Confirm
+					</Button>
+				</div>
+			</div>
+		</>
 	);
 }
 
 export default function FillBlanks({id, allowRepetition, type, prompt, solutions, text, words, onNext, onBack}: FillBlanksExercise & CommonProps) {
 	const [userSolutions, setUserSolutions] = useState<{id: string; solution: string}[]>([]);
 	const [currentBlankId, setCurrentBlankId] = useState<string>();
+	const [blankSelectedWord, setBlankSelectedWord] = useState<string>();
+
+	useEffect(() => {
+		setBlankSelectedWord(currentBlankId ? userSolutions.find((x) => x.id === currentBlankId)?.solution : undefined);
+	}, [userSolutions, currentBlankId]);
+
+	useEffect(() => console.log({blankSelectedWord}), [blankSelectedWord]);
 
 	const calculateScore = () => {
 		const total = text.match(/({{\d+}})/g)?.length || 0;
@@ -81,15 +87,26 @@ export default function FillBlanks({id, allowRepetition, type, prompt, solutions
 		return {total, correct};
 	};
 
+	useEffect(() => {
+		console.log(currentBlankId, userSolutions.find((x) => x.id === currentBlankId)?.solution);
+	}, [userSolutions, currentBlankId]);
+
 	const renderLines = (line: string) => {
 		return (
-			<span>
+			<span className="text-base leading-5">
 				{reactStringReplace(line, /({{\d+}})/g, (match) => {
 					const id = match.replaceAll(/[\{\}]/g, "");
 					const userSolution = userSolutions.find((x) => x.id === id);
 
 					return (
-						<button className="border-2 rounded-xl px-4 text-blue-400 border-blue-400 my-2" onClick={() => setCurrentBlankId(id)}>
+						<button
+							className={clsx(
+								"rounded-full hover:text-white hover:bg-mti-green transition duration-300 ease-in-out my-1",
+								!userSolution && "w-6 h-6 text-center text-mti-green-light bg-mti-green-ultralight",
+								currentBlankId === id && "text-white !bg-mti-green-light ",
+								userSolution && "px-5 py-2 text-center text-white bg-mti-green-light",
+							)}
+							onClick={() => setCurrentBlankId(id)}>
 							{userSolution ? userSolution.solution : id}
 						</button>
 					);
@@ -100,9 +117,11 @@ export default function FillBlanks({id, allowRepetition, type, prompt, solutions
 
 	return (
 		<>
-			<div className="flex flex-col gap-4">
-				<WordsPopout
+			<div className="flex flex-col gap-4 mt-4 h-full mb-20">
+				<WordsDrawer
+					blankId={currentBlankId}
 					words={words.map((word) => ({word, isDisabled: allowRepetition ? false : userSolutions.map((x) => x.solution).includes(word)}))}
+					previouslySelectedWord={blankSelectedWord}
 					isOpen={!!currentBlankId}
 					onCancel={() => setCurrentBlankId(undefined)}
 					onAnswer={(solution: string) => {
@@ -110,7 +129,7 @@ export default function FillBlanks({id, allowRepetition, type, prompt, solutions
 						setCurrentBlankId(undefined);
 					}}
 				/>
-				<span className="text-base md:text-lg font-medium text-center px-2 md:px-4 lg:px-48">
+				<span className="text-sm w-full leading-6">
 					{prompt.split("\\n").map((line, index) => (
 						<Fragment key={index}>
 							{line}
@@ -118,31 +137,27 @@ export default function FillBlanks({id, allowRepetition, type, prompt, solutions
 						</Fragment>
 					))}
 				</span>
-				<span>
+				<span className="bg-mti-gray-smoke rounded-xl px-5 py-6">
 					{text.split("\\n").map((line, index) => (
-						<Fragment key={index}>
+						<p key={index}>
 							{renderLines(line)}
 							<br />
-						</Fragment>
+						</p>
 					))}
 				</span>
 			</div>
 
-			<div className="self-end flex flex-col-reverse items-center w-full md:justify-between md:items-start md:flex-row gap-8">
-				<button className={clsx("btn btn-wide gap-4 relative text-white", errorButtonStyle)} onClick={onBack}>
-					<div className="absolute left-4">
-						<Icon path={mdiArrowLeft} color="white" size={1} />
-					</div>
+			<div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-8">
+				<Button color="green" variant="outline" onClick={onBack} className="max-w-[200px] w-full">
 					Back
-				</button>
-				<button
-					className={clsx("btn btn-wide gap-4 relative text-white", infoButtonStyle)}
-					onClick={() => onNext({exercise: id, solutions: userSolutions, score: calculateScore(), type})}>
+				</Button>
+
+				<Button
+					color="green"
+					onClick={() => onNext({exercise: id, solutions: userSolutions, score: calculateScore(), type})}
+					className="max-w-[200px] self-end w-full">
 					Next
-					<div className="absolute right-4">
-						<Icon path={mdiArrowRight} color="white" size={1} />
-					</div>
-				</button>
+				</Button>
 			</div>
 		</>
 	);