|
|
|
@ -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"> |
|
|
|
|