ENCOA-228 Now when user navigates between modules the generation items persist. Reading, listening and writing added to level module

2024-11-12 14:17:54 +00:00
parent 696c968ebc
commit fdf411d133
66 changed files with 2546 additions and 1635 deletions
--- a/src/components/ExamEditor/ImportExam/ImportOrFromScratch.tsx
+++ b/src/components/ExamEditor/ImportExam/ImportOrFromScratch.tsx
@@ -0,0 +1,56 @@
+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; }> = ({ module }) => {
+  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} />
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default ImportOrFromScratch;