diff --git a/src/components/TopicDetail/CreateCourseModal.tsx b/src/components/TopicDetail/CreateCourseModal.tsx
new file mode 100644
index 000000000..4d1457b5e
--- /dev/null
+++ b/src/components/TopicDetail/CreateCourseModal.tsx
@@ -0,0 +1,54 @@
+import { ChevronRightIcon, SearchIcon } from 'lucide-react';
+import { Modal } from '../Modal';
+
+type CreateCourseModalProps = {
+ onClose: () => void;
+};
+
+export function CreateCourseModal(props: CreateCourseModalProps) {
+ const { onClose } = props;
+
+ return (
+
+
+
+ );
+}
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 b14570e50..908326f3e 100644
--- a/src/components/TopicDetail/TopicDetailAI.tsx
+++ b/src/components/TopicDetail/TopicDetailAI.tsx
@@ -11,6 +11,8 @@ import {
Gift,
Loader2Icon,
LockIcon,
+ PlusIcon,
+ SearchIcon,
SendIcon,
Trash2,
} from 'lucide-react';
@@ -42,6 +44,8 @@ type TopicDetailAIProps = {
onUpgrade: () => void;
onLogin: () => void;
+
+ onShowSubjectSearchModal: () => void;
};
export function TopicDetailAI(props: TopicDetailAIProps) {
@@ -53,6 +57,7 @@ export function TopicDetailAI(props: TopicDetailAIProps) {
topicId,
onUpgrade,
onLogin,
+ onShowSubjectSearchModal,
} = props;
const textareaRef = useRef(null);
@@ -285,6 +290,14 @@ export function TopicDetailAI(props: TopicDetailAIProps) {
))}
)}
+
+
)}