From a26714c7f93a466fd48145d7ab1ee22b6f811adf Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Mon, 10 Mar 2025 16:44:21 +0000
Subject: [PATCH] Responsiveness of screen
---
src/components/GenerateCourse/AICourse.tsx | 20 +++++++++----------
.../GenerateCourse/UserCoursesList.tsx | 4 ++--
2 files changed, 12 insertions(+), 12 deletions(-)
diff --git a/src/components/GenerateCourse/AICourse.tsx b/src/components/GenerateCourse/AICourse.tsx
index 60289b60d..46733a85e 100644
--- a/src/components/GenerateCourse/AICourse.tsx
+++ b/src/components/GenerateCourse/AICourse.tsx
@@ -35,15 +35,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-24">
- <h1 className="mb-2 text-center text-3xl font-bold">
+ <div className="container mx-auto flex max-w-3xl flex-col max-sm:py-4 py-24">
+ <h1 className="mb-2 max-sm:mb-2 max-sm:text-left text-center max-sm:text-xl 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 className="mb-6 max-sm:hidden max-sm:text-sm max-sm:text-left text-center text-gray-600">
+ Enter a topic below to generate a course for it
</p>
- <div className="rounded-lg border border-gray-200 bg-white p-6">
+ <div className="rounded-lg border border-gray-200 bg-white max-sm:p-4 p-6">
<form
className="flex flex-col gap-5"
onSubmit={(e) => {
@@ -68,8 +68,8 @@ export function AICourse(props: AICourseProps) {
value={keyword}
onChange={(e) => setKeyword(e.target.value)}
onKeyDown={handleKeyDown}
- placeholder="e.g., Machine Learning, JavaScript, Photography"
- className="w-full rounded-md border border-gray-300 bg-white p-3 pl-10 text-gray-900 focus:outline-none focus:ring-1 focus:ring-gray-500"
+ placeholder="e.g., Algebra, JavaScript, Photography"
+ className="w-full max-sm:placeholder:text-base rounded-md border border-gray-300 bg-white p-3 pl-10 text-gray-900 focus:outline-none focus:ring-1 focus:ring-gray-500"
maxLength={50}
/>
</div>
@@ -79,14 +79,14 @@ export function AICourse(props: AICourseProps) {
<label className="mb-2.5 text-sm font-medium text-gray-700">
Difficulty Level
</label>
- <div className="flex gap-2">
+ <div className="flex max-sm:flex-col max-sm:gap-1 gap-2">
{difficultyLevels.map((level) => (
<button
key={level}
type="button"
onClick={() => setDifficulty(level)}
className={cn(
- 'rounded-md border px-4 py-2 capitalize',
+ 'rounded-md max-sm:text-sm border px-4 py-2 capitalize',
difficulty === level
? 'border-gray-800 bg-gray-800 text-white'
: 'border-gray-200 bg-gray-100 text-gray-700 hover:bg-gray-200',
@@ -102,7 +102,7 @@ export function AICourse(props: AICourseProps) {
type="submit"
disabled={!keyword.trim()}
className={cn(
- 'mt-2 flex items-center justify-center rounded-lg px-4 py-2 font-medium text-white transition-colors',
+ 'mt-2 max-sm:text-sm flex items-center justify-center rounded-md px-4 py-2 font-medium text-white transition-colors',
!keyword.trim()
? 'cursor-not-allowed bg-gray-400'
: 'bg-black hover:bg-gray-800',
diff --git a/src/components/GenerateCourse/UserCoursesList.tsx b/src/components/GenerateCourse/UserCoursesList.tsx
index b6f39cd5e..62c126f18 100644
--- a/src/components/GenerateCourse/UserCoursesList.tsx
+++ b/src/components/GenerateCourse/UserCoursesList.tsx
@@ -39,12 +39,12 @@ export function UserCoursesList(props: UserCoursesListProps) {
return (
<>
- <div className="mb-3 flex min-h-[35px] items-center justify-between">
+ <div className="mb-3 max-sm:mb-1 flex min-h-[35px] items-center justify-between">
<div className="flex items-center gap-2">
<h2 className="text-lg font-semibold">Your Courses</h2>
</div>
- <div className="relative w-64">
+ <div className="relative max-sm:hidden w-64">
<div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
<Search className="h-4 w-4 text-gray-400" />
</div>