info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-09-25 00:21:28 +02:00
Code Issues Releases Wiki Activity

Add upgrade button on ai page

Browse Source
This commit is contained in:
Kamran Ahmed
2025-04-17 10:55:46 +01:00
parent 3e1bc34d4a
commit 69d9dd23b2
2 changed files with 30 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/AITutor/AITutorLimits.tsx
View File

@@ -12,7 +12,7 @@ type AITutorLimitsProps = {
export function AITutorLimits(props: AITutorLimitsProps) {
const limitUsedPercentage = Math.round((props.used / props.limit) * 100);
if (props.used <= 0 || props.limit <= 0 || props.isPaidUserLoading) {
if (props.limit <= 0 || props.isPaidUserLoading) {
return null;
}
@@ -29,9 +29,7 @@ export function AITutorLimits(props: AITutorLimitsProps) {
<span className="max-md:hidden">
{limitUsedPercentage}% of daily limit used{' '}
</span>
<span className="inline md:hidden">
{limitUsedPercentage}% used
</span>
<span className="inline md:hidden">{limitUsedPercentage}% used</span>
<button
onClick={props.onUpgradeClick}
className="ml-1.5 flex items-center gap-1 rounded-full bg-yellow-600 py-0.5 pr-2 pl-1.5 text-xs text-white"

44
src/components/GenerateCourse/AICourse.tsx
View File

@@ -11,6 +11,8 @@ import {
storeFineTuneData,
} from '../../lib/ai';
import { cn } from '../../lib/classname';
import { useIsPaidUser } from '../../queries/billing';
import { UpgradeAccountModal } from '../Billing/UpgradeAccountModal';
export const difficultyLevels = [
'beginner',
@@ -29,6 +31,9 @@ export function AICourse(props: AICourseProps) {
const [about, setAbout] = useState('');
const [goal, setGoal] = useState('');
const [customInstructions, setCustomInstructions] = useState('');
const [isUpgradeModalOpen, setIsUpgradeModalOpen] = useState(false);
const { isPaidUser, isLoading: isPaidUserLoading } = useIsPaidUser();
useEffect(() => {
const lastSessionId = getLastSessionId();
@@ -73,13 +78,28 @@ export function AICourse(props: AICourseProps) {
return (
<div className="mx-auto flex w-full max-w-3xl flex-grow flex-col pt-4 md:justify-center md:pt-10 lg:pt-0">
<h1 className="mb-0.5 text-center text-4xl font-semibold max-md:text-left max-md:text-xl lg:mb-3">
What can I help you learn?
</h1>
<p className="mb-3 text-center text-lg text-balance text-gray-600 max-md:text-left max-md:text-sm lg:mb-6">
Enter a topic below to generate a personalized course for it
</p>
<div className="relative">
{isUpgradeModalOpen && (
<UpgradeAccountModal onClose={() => setIsUpgradeModalOpen(false)} />
)}
{!isPaidUser && isLoggedIn() && (
<div className="absolute bottom-full left-1/2 -translate-x-1/2 -translate-y-8 text-gray-500">
You are on the free plan
<button
onClick={() => setIsUpgradeModalOpen(true)}
className="ml-2 rounded-lg bg-yellow-600 px-2 py-1 text-sm text-white hover:opacity-80"
>
Upgrade to Pro
</button>
</div>
)}
<h1 className="mb-0.5 text-center text-4xl font-semibold max-md:text-left max-md:text-xl lg:mb-3">
What can I help you learn?
</h1>
<p className="mb-3 text-center text-lg text-balance text-gray-600 max-md:text-left max-md:text-sm md:mb-6">
Enter a topic below to generate a personalized course for it
</p>
</div>
<div className="rounded-lg border border-gray-300 bg-white">
<form
className="flex flex-col"
@@ -165,16 +185,6 @@ export function AICourse(props: AICourseProps) {
</button>
</form>
</div>
<div className="mx-auto mt-4 max-w-xl rounded-lg border border-yellow-100 bg-yellow-50 px-5 py-4">
<div className="flex items-center gap-3">
<p className="text-sm leading-6 text-gray-700">
<span className="font-semibold text-gray-900">💡 Pro tip:</span> Use
Use specific topics like "JavaScript Promises" or "Go Routines"
instead of "JavaScript" or "Go" for better results
</p>
</div>
</div>
</div>
);
}