88 lines
3.7 KiB
TypeScript
88 lines
3.7 KiB
TypeScript
import { Module } from "@/interfaces";
|
|
import clsx from "clsx";
|
|
import { ReactNode } from "react";
|
|
import { MdDelete, MdEdit, MdEditOff, MdRefresh, MdSave, MdGrade, MdOutlineGrade } from "react-icons/md";
|
|
|
|
interface Props {
|
|
title: string;
|
|
description: string;
|
|
editing: boolean;
|
|
module?: Module;
|
|
handleSave: () => void;
|
|
handleDiscard: () => void;
|
|
modeHandle?: () => void;
|
|
evaluationHandle?: () => 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 }) => {
|
|
return (
|
|
<div className="flex justify-between items-center mb-6 text-sm">
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-gray-800">{title}</h1>
|
|
<p className="text-gray-600 mt-1">{description}</p>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
{children}
|
|
<button
|
|
onClick={handleSave}
|
|
disabled={!editing}
|
|
className={
|
|
clsx("px-4 py-2 rounded-lg flex items-center gap-2 transition-all duration-200",
|
|
editing ? 'bg-green-500 text-white hover:bg-green-600' : 'bg-gray-100 text-gray-400 cursor-not-allowed'
|
|
)}
|
|
>
|
|
<MdSave size={18} />
|
|
Save
|
|
</button>
|
|
<button
|
|
onClick={handleDiscard}
|
|
disabled={!editing}
|
|
className={clsx(
|
|
"px-4 py-2 rounded-lg flex items-center gap-2 transition-all duration-200",
|
|
editing ? 'bg-gray-500 text-white hover:bg-gray-600' : 'bg-gray-100 text-gray-400 cursor-not-allowed'
|
|
)}
|
|
>
|
|
<MdRefresh size={18} />
|
|
Discard
|
|
</button>
|
|
{mode === "delete" ? (
|
|
<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}
|
|
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" &&
|
|
<button
|
|
onClick={evaluationHandle}
|
|
className={clsx(
|
|
"px-4 py-2 rounded-lg flex items-center gap-2 transition-all duration-200",
|
|
isEvaluationEnabled
|
|
? 'bg-amber-500 text-white hover:bg-amber-600'
|
|
: 'bg-gray-200 text-gray-600 hover:bg-gray-300'
|
|
)}
|
|
>
|
|
{isEvaluationEnabled ? <MdGrade size={18} /> : <MdOutlineGrade size={18} />}
|
|
{isEvaluationEnabled ? 'Graded Exercise' : 'Practice Only'}
|
|
</button>
|
|
}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Header;
|