60 lines
2.4 KiB
TypeScript
60 lines
2.4 KiB
TypeScript
import React from 'react';
|
|
import { FaPencilAlt } from 'react-icons/fa';
|
|
import { Module } from '@/interfaces';
|
|
import clsx from 'clsx';
|
|
import WordUploader from './WordUploader';
|
|
import GenLoader from '../Exercises/Shared/GenLoader';
|
|
import useExamEditorStore from '@/stores/examEditor';
|
|
|
|
const ImportOrFromScratch: React.FC<{
|
|
module: Module;
|
|
setNumberOfLevelParts: (parts: number) => void;
|
|
}> = ({ module, setNumberOfLevelParts }) => {
|
|
const { currentModule, dispatch } = useExamEditorStore();
|
|
const { importing } = useExamEditorStore((store) => store.modules[currentModule])
|
|
|
|
const handleClick = () => {
|
|
dispatch({ type: "UPDATE_MODULE", payload: { updates: { importModule: false } } });
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{importing ? (
|
|
<GenLoader module={module} custom={`Importing ${module} exam ...`} className='flex flex-grow justify-center bg-slate-200 ' />
|
|
) : (
|
|
<div className="grid grid-cols-2 w-full flex-1 gap-6">
|
|
<button
|
|
onClick={handleClick}
|
|
className={clsx(
|
|
"flex flex-col items-center flex-1 gap-6 justify-center p-8",
|
|
"border-2 border-gray-200 rounded-xl",
|
|
`bg-ielts-${module}/20 hover:bg-ielts-${module}/30`,
|
|
"transition-all duration-300",
|
|
"shadow-sm hover:shadow-md group")}
|
|
>
|
|
<div className="transform group-hover:scale-105 transition-transform duration-300">
|
|
<FaPencilAlt className={clsx("w-20 h-20 transition-colors duration-300",
|
|
module === "reading" && "text-indigo-800 group-hover:text-indigo-950",
|
|
module === "listening" && "text-purple-800 group-hover:text-purple-950",
|
|
module === "level" && "text-teal-700 group-hover:text-teal-900"
|
|
)} />
|
|
</div>
|
|
<span className={clsx("text-lg font-bold transition-colors duration-300",
|
|
module === "reading" && "text-indigo-800 group-hover:text-indigo-950",
|
|
module === "listening" && "text-purple-800 group-hover:text-purple-950",
|
|
module === "level" && "text-teal-700 group-hover:text-teal-900"
|
|
)}>
|
|
Start from Scratch
|
|
</span>
|
|
</button>
|
|
<div className='h-full'>
|
|
<WordUploader module={module} setNumberOfLevelParts={setNumberOfLevelParts} />
|
|
</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default ImportOrFromScratch;
|