From 8899e23322b593de38aff5c1e2b3bae731fba70d Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Thu, 6 Mar 2025 17:32:39 +0000
Subject: [PATCH] Update forward backward UI
---
.../GenerateCourse/AICourseModuleView.tsx | 25 +++++++++++--------
1 file changed, 15 insertions(+), 10 deletions(-)
diff --git a/src/components/GenerateCourse/AICourseModuleView.tsx b/src/components/GenerateCourse/AICourseModuleView.tsx
index 13eeb7253..56689cb6b 100644
--- a/src/components/GenerateCourse/AICourseModuleView.tsx
+++ b/src/components/GenerateCourse/AICourseModuleView.tsx
@@ -182,6 +182,15 @@ export function AICourseModuleView(props: AICourseModuleViewProps) {
};
}, [abortController]);
+ const cantGoForward =
+ (activeModuleIndex === totalModules - 1 &&
+ activeLessonIndex === totalLessons - 1) ||
+ isGenerating ||
+ isLoading;
+
+ const cantGoBack =
+ (activeModuleIndex === 0 && activeLessonIndex === 0) || isGenerating;
+
return (
<div className="mx-auto max-w-4xl">
<div className="relative rounded-lg border border-gray-200 bg-white p-6 shadow-sm">
@@ -270,10 +279,10 @@ export function AICourseModuleView(props: AICourseModuleViewProps) {
<div className="mt-8 flex items-center justify-between">
<button
onClick={onGoToPrevLesson}
- disabled={activeModuleIndex === 0 && activeLessonIndex === 0}
+ disabled={cantGoBack}
className={cn(
- 'flex items-center rounded-md px-4 py-2',
- activeModuleIndex === 0 && activeLessonIndex === 0
+ 'flex items-center rounded-full px-4 py-2 disabled:opacity-50',
+ cantGoBack
? 'cursor-not-allowed text-gray-400'
: 'bg-gray-100 text-gray-700 hover:bg-gray-200',
)}
@@ -284,14 +293,10 @@ export function AICourseModuleView(props: AICourseModuleViewProps) {
<button
onClick={onGoToNextLesson}
- disabled={
- activeModuleIndex === totalModules - 1 &&
- activeLessonIndex === totalLessons - 1
- }
+ disabled={cantGoForward}
className={cn(
- 'flex items-center rounded-md px-4 py-2',
- activeModuleIndex === totalModules - 1 &&
- activeLessonIndex === totalLessons - 1
+ 'flex items-center rounded-full px-4 py-2 disabled:opacity-50',
+ cantGoForward
? 'cursor-not-allowed text-gray-400'
: 'bg-gray-800 text-white hover:bg-gray-700',
)}