65 lines
2.2 KiB
TypeScript
65 lines
2.2 KiB
TypeScript
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;
|