ENCOA-228 Now when user navigates between modules the generation items persist. Reading, listening and writing added to level module
This commit is contained in:
@@ -1,7 +1,8 @@
|
||||
import { Module } from "@/interfaces";
|
||||
import clsx from "clsx";
|
||||
import { ReactNode } from "react";
|
||||
import { MdDelete, MdEdit, MdEditOff, MdRefresh, MdSave, MdGrade, MdOutlineGrade } from "react-icons/md";
|
||||
import { MdDelete, MdEdit, MdEditOff, MdRefresh, MdSave} from "react-icons/md";
|
||||
import { HiOutlineClipboardCheck, HiOutlineClipboardList} from "react-icons/hi";
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
@@ -10,14 +11,15 @@ interface Props {
|
||||
module?: Module;
|
||||
handleSave: () => void;
|
||||
handleDiscard: () => void;
|
||||
modeHandle?: () => void;
|
||||
evaluationHandle?: () => void;
|
||||
handleDelete?: () => void;
|
||||
handlePractice?: () => void;
|
||||
handleEdit?: () => void;
|
||||
isEvaluationEnabled?: boolean;
|
||||
mode?: "delete" | "edit";
|
||||
children?: ReactNode;
|
||||
}
|
||||
|
||||
const Header: React.FC<Props> = ({ title, description, editing, isEvaluationEnabled, handleSave, handleDiscard, modeHandle, evaluationHandle, children, mode = "delete", module }) => {
|
||||
const Header: React.FC<Props> = ({
|
||||
title, description, editing, isEvaluationEnabled, handleSave, handleDiscard, handleDelete, handleEdit, handlePractice, children, module }) => {
|
||||
return (
|
||||
<div className="flex justify-between items-center mb-6 text-sm">
|
||||
<div>
|
||||
@@ -48,26 +50,18 @@ const Header: React.FC<Props> = ({ title, description, editing, isEvaluationEnab
|
||||
<MdRefresh size={18} />
|
||||
Discard
|
||||
</button>
|
||||
{mode === "delete" ? (
|
||||
{handleEdit && (
|
||||
<button
|
||||
onClick={modeHandle}
|
||||
className="px-4 py-2 bg-white border border-red-500 text-red-500 hover:bg-red-50 rounded-lg transition-all duration-200 flex items-center gap-2"
|
||||
>
|
||||
<MdDelete size={18} />
|
||||
Delete
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
onClick={modeHandle}
|
||||
onClick={handleEdit}
|
||||
className={`px-4 py-2 bg-ielts-${module}/80 text-white hover:bg-ielts-${module} rounded-lg transition-all duration-200 flex items-center gap-2`}
|
||||
>
|
||||
{editing ? <MdEditOff size={18} /> : <MdEdit size={18} />}
|
||||
Edit
|
||||
</button>
|
||||
)}
|
||||
{mode === "delete" &&
|
||||
{handlePractice &&
|
||||
<button
|
||||
onClick={evaluationHandle}
|
||||
onClick={handlePractice}
|
||||
className={clsx(
|
||||
"px-4 py-2 rounded-lg flex items-center gap-2 transition-all duration-200",
|
||||
isEvaluationEnabled
|
||||
@@ -75,10 +69,19 @@ const Header: React.FC<Props> = ({ title, description, editing, isEvaluationEnab
|
||||
: 'bg-gray-200 text-gray-600 hover:bg-gray-300'
|
||||
)}
|
||||
>
|
||||
{isEvaluationEnabled ? <MdGrade size={18} /> : <MdOutlineGrade size={18} />}
|
||||
{isEvaluationEnabled ? 'Graded Exercise' : 'Practice Only'}
|
||||
{isEvaluationEnabled ? <HiOutlineClipboardCheck size={18} /> : <HiOutlineClipboardList size={18} />}
|
||||
{isEvaluationEnabled ? 'Graded' : 'Practice'}
|
||||
</button>
|
||||
}
|
||||
{handleDelete && (
|
||||
<button
|
||||
onClick={handleDelete}
|
||||
className="px-4 py-2 bg-white border border-red-500 text-red-500 hover:bg-red-50 rounded-lg transition-all duration-200 flex items-center gap-2"
|
||||
>
|
||||
<MdDelete size={18} />
|
||||
Delete
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user