Fill Blanks changes

src/components/Exercises/FillBlanks/WordsDrawer.tsx

@@ -0,0 +1,64 @@
+import Button from "@/components/Low/Button";
+import clsx from "clsx";
+import { useState } from "react";
+
+interface WordsDrawerProps {
+	words: {word: string; isDisabled: boolean}[];
+	isOpen: boolean;
+	blankId?: string;
+	previouslySelectedWord?: string;
+	onCancel: () => void;
+	onAnswer: (answer: string) => void;
+}
+
+
+const WordsDrawer: React.FC<WordsDrawerProps> = ({words, isOpen, blankId, previouslySelectedWord, onCancel, onAnswer}) => {
+	const [selectedWord, setSelectedWord] = useState<string | undefined>(previouslySelectedWord);
+
+	return (
+		<>
+			<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-purple-light">{blankId}</div>
+					<span> Choose the correct word:</span>
+				</div>
+				<div className="grid grid-cols-6 gap-6" key="word-array">
+					{words.map(({word, isDisabled}) => (
+						<button
+							key={`${word}_${blankId}`}
+							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-purple-light" : "bg-mti-purple-ultralight",
+								!isDisabled && "hover:text-white hover:bg-mti-purple",
+								"disabled:cursor-not-allowed disabled:text-mti-gray-dim",
+							)}
+							disabled={isDisabled}>
+							{word}
+						</button>
+					))}
+				</div>
+				<div className="flex justify-between w-full">
+					<Button color="purple" variant="outline" className="max-w-[200px] w-full" onClick={onCancel}>
+						Cancel
+					</Button>
+					<Button color="purple" className="max-w-[200px] w-full" onClick={() => onAnswer(selectedWord!)} disabled={!selectedWord}>
+						Confirm
+					</Button>
+				</div>
+			</div>
+		</>
+	);
+}
+
+export default WordsDrawer;