From fc824014309ea385cfdf41ee20945fce3ddc3ac3 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Mon, 10 Mar 2025 14:35:37 +0000
Subject: [PATCH] Improve UI for course generator
---
src/components/GenerateCourse/AICourse.tsx | 29 +++++++------------
.../GenerateCourse/AICourseCard.tsx | 2 +-
2 files changed, 12 insertions(+), 19 deletions(-)
diff --git a/src/components/GenerateCourse/AICourse.tsx b/src/components/GenerateCourse/AICourse.tsx
index 15f8c0744..785e6ddf6 100644
--- a/src/components/GenerateCourse/AICourse.tsx
+++ b/src/components/GenerateCourse/AICourse.tsx
@@ -43,18 +43,15 @@ export function AICourse(props: AICourseProps) {
return (
<section className="flex flex-grow flex-col bg-gray-100">
- <div className="container mx-auto flex max-w-3xl flex-col py-12">
- <h1 className="mb-2 text-3xl font-bold">AI Course Generator</h1>
- <p className="mb-6 text-gray-600">
- Create personalized learning paths with AI
+ <div className="container mx-auto flex max-w-3xl flex-col py-24">
+ <h1 className="mb-2 text-center text-3xl font-bold">
+ AI Course Generator
+ </h1>
+ <p className="mb-6 text-center text-gray-600">
+ Enter a topic below to generate a course on it.
</p>
- <div className="rounded-md border border-gray-200 bg-white p-6">
- <p className="mb-6 text-gray-600">
- Enter a keyword or topic, and our AI will create a personalized
- learning course for you.
- </p>
-
+ <div className="rounded-lg border border-gray-200 bg-white p-6">
<form
className="flex flex-col gap-4"
onSubmit={(e) => {
@@ -100,7 +97,7 @@ export function AICourse(props: AICourseProps) {
type="button"
onClick={() => setDifficulty(level)}
className={cn(
- 'rounded-md border px-4 py-2 capitalize',
+ 'rounded-md border px-4 py-1 text-sm capitalize',
difficulty === level
? 'border-gray-800 bg-gray-800 text-white'
: 'border-gray-200 bg-gray-100 text-gray-700 hover:bg-gray-200',
@@ -116,7 +113,7 @@ export function AICourse(props: AICourseProps) {
type="submit"
disabled={!keyword.trim()}
className={cn(
- 'mt-2 flex items-center justify-center rounded-md px-4 py-2 font-medium text-white transition-colors',
+ 'mt-2 flex items-center justify-center rounded-lg px-4 py-2 font-medium text-white transition-colors',
!keyword.trim()
? 'cursor-not-allowed bg-gray-400'
: 'bg-black hover:bg-gray-800',
@@ -128,12 +125,8 @@ export function AICourse(props: AICourseProps) {
</form>
</div>
- <div className="mt-8 min-h-[200px] rounded-lg border border-gray-200 bg-white p-6">
- <h2 className="mb-4 text-lg font-semibold">Your Courses</h2>
-
- {isUserAiCoursesLoading && (
- <div className="h-[92px] animate-pulse rounded-lg border border-gray-200 bg-gray-200"></div>
- )}
+ <div className="mt-8 min-h-[200px]">
+ <h2 className="mb-2 text-lg font-semibold">Your Courses</h2>
{!isUserAiCoursesLoading && userAiCourses?.length === 0 && (
<p className="text-gray-600">
diff --git a/src/components/GenerateCourse/AICourseCard.tsx b/src/components/GenerateCourse/AICourseCard.tsx
index 4ac42f814..f378670a7 100644
--- a/src/components/GenerateCourse/AICourseCard.tsx
+++ b/src/components/GenerateCourse/AICourseCard.tsx
@@ -40,7 +40,7 @@ export function AICourseCard(props: AICourseCardProps) {
return (
<a
href={`/ai-tutor/${course.slug}`}
- className="group relative flex w-full flex-col overflow-hidden rounded-md border border-gray-300 bg-white p-4 text-left transition-all hover:border-gray-3 00 hover:bg-gray-50"
+ className="group relative flex w-full flex-col overflow-hidden rounded-lg border border-gray-300 bg-white p-4 text-left transition-all hover:border-gray-3 00 hover:bg-gray-50"
>
<div className="mb-2 flex items-center justify-between">
<span