Update UI for a course

src/components/AITutor/AIExploreCourseListing.tsx

@@ -3,9 +3,7 @@ import { useEffect, useState } from 'react';
 import { AlertCircle, Loader2 } from 'lucide-react';
 import { AICourseCard } from '../GenerateCourse/AICourseCard';
 
-type AIExploreCourseListingProps = {};
-
-export function AIExploreCourseListing(props: AIExploreCourseListingProps) {
+export function AIExploreCourseListing() {
   const [isInitialLoading, setIsInitialLoading] = useState(true);
 
   const {

src/components/AITutor/AIFeaturedCoursesListing.tsx

@@ -1,6 +1,7 @@
 import { useQuery } from '@tanstack/react-query';
 import {
-  listFeaturedAiCoursesOptions, type ListUserAiCoursesQuery
+  listFeaturedAiCoursesOptions,
+  type ListUserAiCoursesQuery,
 } from '../../queries/ai-course';
 import { queryClient } from '../../stores/query-client';
 import { useEffect, useState } from 'react';
@@ -11,11 +12,11 @@ import { AILoadingState } from './AILoadingState';
 import { AITutorTallMessage } from './AITutorTallMessage';
 import { BookOpen } from 'lucide-react';
 import { AITutorHeader } from './AITutorHeader';
+import { UpgradeAccountModal } from '../Billing/UpgradeAccountModal';
 
-type AIFeaturedCoursesListingProps = {};
-
-export function AIFeaturedCoursesListing(props: AIFeaturedCoursesListingProps) {
+export function AIFeaturedCoursesListing() {
   const [isInitialLoading, setIsInitialLoading] = useState(true);
+  const [showUpgradePopup, setShowUpgradePopup] = useState(false);
 
   const [pageState, setPageState] = useState<ListUserAiCoursesQuery>({
     perPage: '20',
@@ -75,11 +76,18 @@ export function AIFeaturedCoursesListing(props: AIFeaturedCoursesListingProps) {
 
   return (
     <div className="w-full">
-      <AITutorHeader title="Featured Courses" />
+      {showUpgradePopup && (
+        <UpgradeAccountModal onClose={() => setShowUpgradePopup(false)} />
+      )}
+
+      <AITutorHeader
+        title="Featured Courses"
+        onUpgradeClick={() => setShowUpgradePopup(true)}
+      />
 
       {!isFeaturedAiCoursesLoading && courses && courses.length > 0 && (
         <div className="flex flex-col gap-2">
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2">
+          <div className="grid grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-3">
             {courses.map((course) => (
               <AICourseCard
                 key={course._id}

src/components/AITutor/AITutorHeader.tsx

@@ -2,25 +2,19 @@ import { useQuery } from '@tanstack/react-query';
 import { AITutorLimits } from './AITutorLimits';
 import { getAiCourseLimitOptions } from '../../queries/ai-course';
 import { queryClient } from '../../stores/query-client';
+import { useIsPaidUser } from '../../queries/billing';
 
 type AITutorHeaderProps = {
   title: string;
-  isPaidUser: boolean;
-  isPaidUserLoading: boolean;
-  setShowUpgradePopup: (show: boolean) => void;
+  onUpgradeClick: () => void;
   children?: React.ReactNode;
 };
 
 export function AITutorHeader(props: AITutorHeaderProps) {
-  const {
-    title,
-    isPaidUser,
-    isPaidUserLoading,
-    setShowUpgradePopup,
-    children,
-  } = props;
+  const { title, onUpgradeClick, children } = props;
 
   const { data: limits } = useQuery(getAiCourseLimitOptions(), queryClient);
+  const { isPaidUser, isLoading: isPaidUserLoading } = useIsPaidUser();
 
   const { used, limit } = limits ?? { used: 0, limit: 0 };
 
@@ -36,7 +30,7 @@ export function AITutorHeader(props: AITutorHeaderProps) {
           limit={limit}
           isPaidUser={isPaidUser}
           isPaidUserLoading={isPaidUserLoading}
-          onUpgradeClick={() => setShowUpgradePopup(true)}
+          onUpgradeClick={onUpgradeClick}
         />
 
         {children}

src/components/GenerateCourse/UserCoursesList.tsx

@@ -8,7 +8,6 @@ import {
   listUserAiCoursesOptions,
   type ListUserAiCoursesQuery,
 } from '../../queries/ai-course';
-import { useIsPaidUser } from '../../queries/billing';
 import { queryClient } from '../../stores/query-client';
 import { AILoadingState } from '../AITutor/AILoadingState';
 import { AITutorHeader } from '../AITutor/AITutorHeader';
@@ -18,9 +17,7 @@ import { Pagination } from '../Pagination/Pagination';
 import { AICourseCard } from './AICourseCard';
 import { AICourseSearch } from './AICourseSearch';
 
-type UserCoursesListProps = {};
-
-export function UserCoursesList(props: UserCoursesListProps) {
+export function UserCoursesList() {
   const [isInitialLoading, setIsInitialLoading] = useState(true);
   const [showUpgradePopup, setShowUpgradePopup] = useState(false);
 
@@ -30,8 +27,6 @@ export function UserCoursesList(props: UserCoursesListProps) {
     query: '',
   });
 
-  const { isPaidUser, isLoading: isPaidUserLoading } = useIsPaidUser();
-
   const { data: userAiCourses, isFetching: isUserAiCoursesLoading } = useQuery(
     listUserAiCoursesOptions(pageState),
     queryClient,
@@ -110,9 +105,7 @@ export function UserCoursesList(props: UserCoursesListProps) {
 
       <AITutorHeader
         title="Your Courses"
-        isPaidUser={isPaidUser}
-        isPaidUserLoading={isPaidUserLoading}
-        setShowUpgradePopup={setShowUpgradePopup}
+        onUpgradeClick={() => setShowUpgradePopup(true)}
       >
         <AICourseSearch
           value={pageState?.query || ''}

src/pages/ai/community.astro

@@ -12,10 +12,6 @@ const ogImage = 'https://roadmap.sh/og-images/ai-tutor.png';
   description='Learn anything with AI Tutor. Pick a topic, choose a difficulty level and the AI will guide you through the learning process.'
 >
   <AITutorLayout activeTab='community' client:load>
-    <section class='flex grow flex-col bg-gray-100'>
-      <div class='mx-auto w-full flex max-w-4xl flex-col py-10 max-sm:py-4'>
-        <AIExploreCourseListing client:load />
-      </div>
-    </section>
+    <AIExploreCourseListing client:load />
   </AITutorLayout>
 </SkeletonLayout>