Update UI for a course

feat/ai-tutor-redesign
Kamran Ahmed 3 weeks ago
parent 4fbea4680c
commit 3918112884
  1. 4
      src/components/AITutor/AIExploreCourseListing.tsx
  2. 20
      src/components/AITutor/AIFeaturedCoursesListing.tsx
  3. 16
      src/components/AITutor/AITutorHeader.tsx
  4. 11
      src/components/GenerateCourse/UserCoursesList.tsx
  5. 4
      src/pages/ai/community.astro

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

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

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

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

@ -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.' 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> <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 /> <AIExploreCourseListing client:load />
</div>
</section>
</AITutorLayout> </AITutorLayout>
</SkeletonLayout> </SkeletonLayout>

Loading…
Cancel
Save