Implement guides functionality

src/components/AITutor/AIExploreCourseListing.tsx

@@ -88,10 +88,26 @@ export function AIExploreCourseListing() {
 
       {!isAnyLoading && (
         <>
-          <p className="mb-4 text-sm text-gray-500">
+          <div className="mb-4 flex items-center justify-between">
-            Community has generated{' '}
+            <p className="text-sm text-gray-500">
-            {humanizeNumber(exploreAiCourses?.totalCount || 0)} courses
+              Community has generated{' '}
-          </p>
+              {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">

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}

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"
         >
           ←
         </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);
           }}