Improve UI for course generator

feat/ai-courses
Kamran Ahmed 1 month ago
parent 43f9e9d622
commit fc82401430
  1. 29
      src/components/GenerateCourse/AICourse.tsx
  2. 2
      src/components/GenerateCourse/AICourseCard.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">

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

Loading…
Cancel
Save