From d94fb3bd43c61d23ac996cbdf6e1cfc8b89ed853 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Thu, 19 Jun 2025 02:17:01 +0100
Subject: [PATCH] Implement guides functionality

---
 .../AITutor/AIExploreCourseListing.tsx        | 24 +++++++++++++++----
 .../ContentGenerator/FormatItem.tsx           |  2 +-
 src/components/Pagination/Pagination.tsx      |  4 ++--
 3 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/src/components/AITutor/AIExploreCourseListing.tsx b/src/components/AITutor/AIExploreCourseListing.tsx
index dfa8ceca8..c0a357429 100644
--- a/src/components/AITutor/AIExploreCourseListing.tsx
+++ b/src/components/AITutor/AIExploreCourseListing.tsx
@@ -88,10 +88,26 @@ export function AIExploreCourseListing() {
 
       {!isAnyLoading && (
         <>
-          <p className="mb-4 text-sm text-gray-500">
-            Community has generated{' '}
-            {humanizeNumber(exploreAiCourses?.totalCount || 0)} courses
-          </p>
+          <div className="mb-4 flex items-center justify-between">
+            <p className="text-sm text-gray-500">
+              Community has generated{' '}
+              {humanizeNumber(exploreAiCourses?.totalCount || 0)} courses
+            </p>
+
+            <div className="hidden lg:block">
+              <Pagination
+                variant="minimal"
+                totalCount={exploreAiCourses?.totalCount || 0}
+                totalPages={exploreAiCourses?.totalPages || 0}
+                currPage={Number(exploreAiCourses?.currPage || 1)}
+                perPage={Number(exploreAiCourses?.perPage || 21)}
+                onPageChange={(page) => {
+                  setPageState({ ...pageState, currPage: String(page) });
+                }}
+                className=""
+              />
+            </div>
+          </div>
 
           {courses && courses.length > 0 && (
             <div className="flex flex-col gap-2">
diff --git a/src/components/ContentGenerator/FormatItem.tsx b/src/components/ContentGenerator/FormatItem.tsx
index 9e93408cc..9797ac0c5 100644
--- a/src/components/ContentGenerator/FormatItem.tsx
+++ b/src/components/ContentGenerator/FormatItem.tsx
@@ -17,7 +17,7 @@ export function FormatItem(props: FormatItemProps) {
       className={cn(
         'flex w-full flex-col items-center justify-center gap-2.5 rounded-xl border border-gray-200 p-2 py-8',
         isSelected
-          ? 'border-gray-700 font-medium bg-white'
+          ? 'border-gray-400 font-medium bg-white'
           : 'bg-white text-gray-400 hover:bg-white hover:border-gray-300',
       )}
       onClick={onClick}
diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx
index c20214c8b..cfac40800 100644
--- a/src/components/Pagination/Pagination.tsx
+++ b/src/components/Pagination/Pagination.tsx
@@ -51,7 +51,7 @@ export function Pagination(props: PaginationProps) {
             onPageChange(currPage - 1);
           }}
           disabled={currPage === 1 || isDisabled}
-          className="rounded-md border px-2 py-1 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-40"
+          className="rounded-md bg-white border px-2 py-1 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-40"
         >
           &larr;
         </button>
@@ -91,7 +91,7 @@ export function Pagination(props: PaginationProps) {
         )}
         <button
           disabled={currPage === totalPages || isDisabled}
-          className="rounded-md border px-2 py-1 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-40"
+          className="rounded-md bg-white border px-2 py-1 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-40"
           onClick={() => {
             onPageChange(currPage + 1);
           }}