Updated more of the exam generation

2023-11-20 23:30:47 +00:00
parent 4c7e8f56d8
commit cdc8cfe46e
6 changed files with 209 additions and 54 deletions
--- a/src/pages/(generation)/WritingGeneration.tsx
+++ b/src/pages/(generation)/WritingGeneration.tsx
@@ -0,0 +1,114 @@
+import Input from "@/components/Low/Input";
+import {Tab} from "@headlessui/react";
+import axios from "axios";
+import clsx from "clsx";
+import {useState} from "react";
+import {BsArrowRepeat} from "react-icons/bs";
+import {toast} from "react-toastify";
+
+const WritingGeneration = () => {
+	const [task1, setTask1] = useState<string>();
+	const [task2, setTask2] = useState<string>();
+
+	const TaskTab = ({task, index, setTask}: {task?: string; index: number; setTask: (task: string) => void}) => {
+		const [isLoading, setIsLoading] = useState(false);
+
+		const generate = () => {
+			setIsLoading(true);
+			axios
+				.get(`/api/exam/writing/generate/writing_task${index}_general`)
+				.then((result) => setTask(result.data.question))
+				.catch((error) => {
+					console.log(error);
+					toast.error("Something went wrong!");
+				})
+				.finally(() => setIsLoading(false));
+		};
+
+		return (
+			<Tab.Panel className="w-full bg-ielts-writing/20 min-h-[600px] h-full rounded-xl p-6 flex flex-col gap-4">
+				<div className="flex gap-4 items-end">
+					<button
+						onClick={generate}
+						disabled={isLoading}
+						className={clsx(
+							"bg-ielts-writing/70 border border-ielts-writing text-white w-full px-6 py-6 rounded-xl h-[70px]",
+							"hover:bg-ielts-writing disabled:bg-ielts-writing/40 disabled:cursor-not-allowed",
+							"transition ease-in-out duration-300",
+						)}>
+						{isLoading ? (
+							<div className="flex items-center justify-center">
+								<BsArrowRepeat className="text-white animate-spin" size={25} />
+							</div>
+						) : (
+							"Generate"
+						)}
+					</button>
+				</div>
+				{isLoading && (
+					<div className="w-fit h-fit mt-12 self-center animate-pulse flex flex-col gap-8 items-center">
+						<span className={clsx("loading loading-infinity w-32 text-ielts-writing")} />
+						<span className={clsx("font-bold text-2xl text-ielts-writing")}>Generating...</span>
+					</div>
+				)}
+				{task && (
+					<div className="flex flex-col gap-2 w-full overflow-y-scroll scrollbar-hide">
+						<span className="w-full h-96">{task}</span>
+					</div>
+				)}
+			</Tab.Panel>
+		);
+	};
+
+	return (
+		<>
+			<Tab.Group>
+				<Tab.List className="flex space-x-1 rounded-xl bg-ielts-writing/20 p-1">
+					<Tab
+						className={({selected}) =>
+							clsx(
+								"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-writing/70",
+								"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-writing focus:outline-none focus:ring-2",
+								"transition duration-300 ease-in-out",
+								selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-writing",
+							)
+						}>
+						Task 1
+					</Tab>
+					<Tab
+						className={({selected}) =>
+							clsx(
+								"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-writing/70",
+								"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-writing focus:outline-none focus:ring-2",
+								"transition duration-300 ease-in-out",
+								selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-writing",
+							)
+						}>
+						Task 2
+					</Tab>
+				</Tab.List>
+				<Tab.Panels>
+					{[
+						{task: task1, setTask: setTask1},
+						{task: task2, setTask: setTask2},
+					].map(({task, setTask}, index) => (
+						<TaskTab task={task} index={index + 1} key={index} setTask={setTask} />
+					))}
+				</Tab.Panels>
+			</Tab.Group>
+			<button
+				disabled={!task1 || !task2}
+				data-tip="Please generate all three passages"
+				className={clsx(
+					"bg-ielts-writing/70 border border-ielts-writing text-white w-full max-w-[200px] px-6 py-6 rounded-xl h-[70px] self-end",
+					"hover:bg-ielts-writing disabled:bg-ielts-writing/40 disabled:cursor-not-allowed",
+					"transition ease-in-out duration-300",
+					(!task1 || !task2) && "tooltip",
+				)}>
+				Submit
+			</button>
+		</>
+	);
+};
+
+export default WritingGeneration;