diff --git a/src/components/TopicDetail/CreateCourseModal.tsx b/src/components/TopicDetail/CreateCourseModal.tsx new file mode 100644 index 000000000..24b68ed81 --- /dev/null +++ b/src/components/TopicDetail/CreateCourseModal.tsx @@ -0,0 +1,60 @@ +import { WandSparkles } from 'lucide-react'; +import { Modal } from '../Modal'; +import { useState } from 'react'; + +type CreateCourseModalProps = { + onClose: () => void; +}; + +export function CreateCourseModal(props: CreateCourseModalProps) { + const { onClose } = props; + + const [subject, setSubject] = useState(''); + + return ( + +
{ + e.preventDefault(); + const formData = new FormData(e.target as HTMLFormElement); + const subject = formData.get('subject'); + + window.location.href = `/ai/search?term=${subject}&difficulty=beginner&src=topic`; + onClose(); + }} + > + +
+ setSubject(e.target.value)} + /> + + +
+
+
+ ); +} diff --git a/src/components/TopicDetail/TopicDetail.tsx b/src/components/TopicDetail/TopicDetail.tsx index a58fcab87..d3f9ab3d1 100644 --- a/src/components/TopicDetail/TopicDetail.tsx +++ b/src/components/TopicDetail/TopicDetail.tsx @@ -42,6 +42,7 @@ import { cn } from '../../lib/classname.ts'; import type { AIChatHistoryType } from '../GenerateCourse/AICourseLessonChat.tsx'; import { UpgradeAccountModal } from '../Billing/UpgradeAccountModal.tsx'; import { TopicProgressButton } from './TopicProgressButton.tsx'; +import { CreateCourseModal } from './CreateCourseModal.tsx'; type TopicDetailProps = { resourceId?: string; @@ -119,6 +120,8 @@ export function TopicDetail(props: TopicDetailProps) { const [showUpgradeModal, setShowUpgradeModal] = useState(false); const [isCustomResource, setIsCustomResource] = useState(false); + const [showSubjectSearchModal, setShowSubjectSearchModal] = useState(false); + const toast = useToast(); const [showPaidResourceDisclaimer, setShowPaidResourceDisclaimer] = @@ -139,6 +142,7 @@ export function TopicDetail(props: TopicDetailProps) { setShowUpgradeModal(false); setAiChatHistory(defaultChatHistory); setActiveTab('content'); + setShowSubjectSearchModal(false); }; // Close the topic detail when user clicks outside the topic detail @@ -349,10 +353,6 @@ export function TopicDetail(props: TopicDetailProps) { return null; } - const resourceTitleForSearch = resourceTitle - ?.toLowerCase() - ?.replace(/\s+?roadmap/gi, ''); - const tnsLink = 'https://thenewstack.io/devops/?utm_source=roadmap.sh&utm_medium=Referral&utm_campaign=Topic'; @@ -362,10 +362,6 @@ export function TopicDetail(props: TopicDetailProps) { return resource.topicIds.includes(normalizedTopicId); }); - const hasPaidScrimbaLinks = paidResourcesForTopic.some( - (resource) => resource?.url?.toLowerCase().indexOf('scrimba') !== -1, - ); - const shouldShowAiTab = !isCustomResource && resourceType === 'roadmap'; return ( @@ -379,6 +375,10 @@ export function TopicDetail(props: TopicDetailProps) { setShowUpgradeModal(false)} /> )} + {showSubjectSearchModal && ( + setShowSubjectSearchModal(false)} /> + )} + {isLoading && (
{ + if (!isLoggedIn()) { + showLoginPopup(); + return; + } + + setShowSubjectSearchModal(true); + }} /> )} diff --git a/src/components/TopicDetail/TopicDetailAI.tsx b/src/components/TopicDetail/TopicDetailAI.tsx index 21310cb1d..8b4511337 100644 --- a/src/components/TopicDetail/TopicDetailAI.tsx +++ b/src/components/TopicDetail/TopicDetailAI.tsx @@ -10,9 +10,8 @@ import { ChevronRightIcon, Gift, Loader2Icon, - LockIcon, - SendIcon, - Trash2, + LockIcon, SendIcon, Trash2, + WandSparkles } from 'lucide-react'; import { showLoginPopup } from '../../lib/popup'; import { cn } from '../../lib/classname'; @@ -42,6 +41,8 @@ type TopicDetailAIProps = { onUpgrade: () => void; onLogin: () => void; + + onShowSubjectSearchModal: () => void; }; export function TopicDetailAI(props: TopicDetailAIProps) { @@ -53,6 +54,7 @@ export function TopicDetailAI(props: TopicDetailAIProps) { topicId, onUpgrade, onLogin, + onShowSubjectSearchModal, } = props; const textareaRef = useRef(null); @@ -298,6 +300,14 @@ export function TopicDetailAI(props: TopicDetailAIProps) { ))} )} + +
)}