Refactor AI roadmap generator (#5300)
* fix: roadmap refetching * fix: remove current roadmap * feat: explore ai roadmaps * feat: generate roadmap content * fix: roadmap topic details * fix: make roadmap link * feat: add visit cookie * chore: update naming * Update UI for roadmap search * Update * Update * UI updates * fix: expire visit cookie in 1 hour * chore: limit roadmap topic content generation * Add alert on generate roadmap * UI for search * Refactor nodesg * Refactor * Load roadmap on click * Refactor UI for ai * Allow overriding with own API key * Allow overriding keys * Add configuration for open ai key * Add open ai saving * Fix responsiveness issues * Fix responsiveness issues --------- Co-authored-by: Kamran Ahmed <kamranahmed.se@gmail.com>pull/5327/head
Arik Chakma
9 months ago
committed by
GitHub
parent
09cb1ea827
commit
cd6232035f
11 changed files with 1224 additions and 216 deletions
@ -0,0 +1,149 @@ |
||||
import { useCallback, useEffect, useState } from 'react'; |
||||
import { useToast } from '../../hooks/use-toast'; |
||||
import { httpGet } from '../../lib/http'; |
||||
import { getRelativeTimeString } from '../../lib/date'; |
||||
import { Eye, Loader2, RefreshCcw } from 'lucide-react'; |
||||
import { AIRoadmapAlert } from '../GenerateRoadmap/AIRoadmapAlert.tsx'; |
||||
|
||||
export interface AIRoadmapDocument { |
||||
_id?: string; |
||||
term: string; |
||||
title: string; |
||||
data: string; |
||||
viewCount: number; |
||||
createdAt: Date; |
||||
updatedAt: Date; |
||||
} |
||||
|
||||
type ExploreRoadmapsResponse = { |
||||
data: AIRoadmapDocument[]; |
||||
totalCount: number; |
||||
totalPages: number; |
||||
currPage: number; |
||||
perPage: number; |
||||
}; |
||||
|
||||
export function ExploreAIRoadmap() { |
||||
const toast = useToast(); |
||||
|
||||
const [isLoading, setIsLoading] = useState(true); |
||||
const [isLoadingMore, setIsLoadingMore] = useState(false); |
||||
const [roadmaps, setRoadmaps] = useState<AIRoadmapDocument[]>([]); |
||||
const [currPage, setCurrPage] = useState(1); |
||||
const [totalPages, setTotalPages] = useState(1); |
||||
|
||||
const loadAIRoadmaps = useCallback( |
||||
async (currPage: number) => { |
||||
const { response, error } = await httpGet<ExploreRoadmapsResponse>( |
||||
`${import.meta.env.PUBLIC_API_URL}/v1-list-ai-roadmaps`, |
||||
{ |
||||
currPage, |
||||
}, |
||||
); |
||||
|
||||
if (error || !response) { |
||||
toast.error(error?.message || 'Something went wrong'); |
||||
return; |
||||
} |
||||
|
||||
const newRoadmaps = [...roadmaps, ...response.data]; |
||||
if ( |
||||
JSON.stringify(roadmaps) === JSON.stringify(response.data) || |
||||
JSON.stringify(roadmaps) === JSON.stringify(newRoadmaps) |
||||
) { |
||||
return; |
||||
} |
||||
|
||||
setRoadmaps(newRoadmaps); |
||||
setCurrPage(response.currPage); |
||||
setTotalPages(response.totalPages); |
||||
}, |
||||
[currPage, roadmaps], |
||||
); |
||||
|
||||
useEffect(() => { |
||||
loadAIRoadmaps(currPage).finally(() => { |
||||
setIsLoading(false); |
||||
}); |
||||
}, []); |
||||
|
||||
const hasMorePages = currPage < totalPages; |
||||
|
||||
return ( |
||||
<section className="container mx-auto py-3 sm:py-6"> |
||||
<div className="mb-6"> |
||||
<AIRoadmapAlert isListing /> |
||||
</div> |
||||
|
||||
{isLoading ? ( |
||||
<ul className="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3"> |
||||
{new Array(21).fill(0).map((_, index) => ( |
||||
<li |
||||
key={index} |
||||
className="h-[75px] animate-pulse rounded-md border bg-gray-100" |
||||
></li> |
||||
))} |
||||
</ul> |
||||
) : ( |
||||
<div> |
||||
{roadmaps?.length === 0 ? ( |
||||
<div className="text-center text-gray-800">No roadmaps found</div> |
||||
) : ( |
||||
<> |
||||
<ul className="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3"> |
||||
{roadmaps.map((roadmap) => { |
||||
const roadmapLink = `/ai?id=${roadmap._id}`; |
||||
return ( |
||||
<a |
||||
key={roadmap._id} |
||||
href={roadmapLink} |
||||
className="flex flex-col rounded-md border transition-colors hover:bg-gray-100" |
||||
target={'_blank'} |
||||
> |
||||
<h2 className="flex-grow px-2.5 py-2.5 text-base font-medium leading-tight"> |
||||
{roadmap.title} |
||||
</h2> |
||||
<div className="flex items-center justify-between gap-2 px-2.5 py-2"> |
||||
<span className="flex items-center gap-1.5 text-xs text-gray-400"> |
||||
<Eye size={15} className="inline-block" /> |
||||
{Intl.NumberFormat('en-US', { |
||||
notation: 'compact', |
||||
}).format(roadmap.viewCount)}{' '} |
||||
views |
||||
</span> |
||||
<span className="flex items-center gap-1.5 text-xs text-gray-400"> |
||||
{getRelativeTimeString(String(roadmap?.createdAt))} |
||||
</span> |
||||
</div> |
||||
</a> |
||||
); |
||||
})} |
||||
</ul> |
||||
{hasMorePages && ( |
||||
<div className="my-5 flex items-center justify-center"> |
||||
<button |
||||
onClick={() => { |
||||
setIsLoadingMore(true); |
||||
loadAIRoadmaps(currPage + 1).finally(() => { |
||||
setIsLoadingMore(false); |
||||
}); |
||||
}} |
||||
className="inline-flex items-center gap-1.5 rounded-full bg-black px-3 py-1.5 text-sm font-medium text-white shadow-xl transition-colors focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50" |
||||
disabled={isLoadingMore} |
||||
> |
||||
{isLoadingMore ? ( |
||||
<Loader2 className="h-4 w-4 animate-spin stroke-[2.5]" /> |
||||
) : ( |
||||
<RefreshCcw className="h-4 w-4 stroke-[2.5]" /> |
||||
)} |
||||
Load More |
||||
</button> |
||||
</div> |
||||
)} |
||||
</> |
||||
)} |
||||
</div> |
||||
)} |
||||
</section> |
||||
); |
||||
} |
||||
@ -0,0 +1,53 @@ |
||||
import { BadgeCheck, Telescope, Wand } from 'lucide-react'; |
||||
|
||||
type AIRoadmapAlertProps = { |
||||
isListing?: boolean; |
||||
}; |
||||
|
||||
export function AIRoadmapAlert(props: AIRoadmapAlertProps) { |
||||
const { isListing = false } = props; |
||||
|
||||
return ( |
||||
<div className="mb-3 w-full rounded-xl bg-yellow-100 px-4 py-3 text-yellow-800"> |
||||
<h2 className="flex items-center text-base font-semibold text-yellow-800 sm:text-lg"> |
||||
AI Generated Roadmap{isListing ? 's' : ''}{' '} |
||||
<span className="ml-1.5 rounded-md border border-yellow-500 bg-yellow-200 px-1.5 text-xs uppercase tracking-wide text-yellow-800"> |
||||
Beta |
||||
</span> |
||||
</h2> |
||||
<p className="mb-2 mt-1"> |
||||
{isListing |
||||
? 'These are AI generated roadmaps and are not verified by' |
||||
: 'This is an AI generated roadmap and is not verified by'}{' '} |
||||
<span className={'font-semibold'}>roadmap.sh</span>. We are currently in |
||||
beta and working hard to improve the quality of the generated roadmaps. |
||||
</p> |
||||
<p className="mb-1.5 mt-2 flex flex-col gap-2 text-sm sm:flex-row"> |
||||
{isListing ? ( |
||||
<a |
||||
href="/ai" |
||||
className="flex items-center gap-1.5 rounded-md border border-yellow-600 px-2 py-1 text-yellow-700 transition-colors hover:bg-yellow-300 hover:text-yellow-800" |
||||
> |
||||
<Wand size={15} /> |
||||
Create your own Roadmap with AI |
||||
</a> |
||||
) : ( |
||||
<a |
||||
href="/ai/explore" |
||||
className="flex items-center gap-1.5 rounded-md border border-yellow-600 px-2 py-1 text-yellow-700 transition-colors hover:bg-yellow-300 hover:text-yellow-800" |
||||
> |
||||
<Telescope size={15} /> |
||||
Explore other AI Roadmaps |
||||
</a> |
||||
)} |
||||
<a |
||||
href="/roadmaps" |
||||
className="flex items-center gap-1.5 rounded-md border border-yellow-600 bg-yellow-200 px-2 py-1 text-yellow-800 transition-colors hover:bg-yellow-300" |
||||
> |
||||
<BadgeCheck size={15} /> |
||||
Visit Official Roadmaps |
||||
</a> |
||||
</p> |
||||
</div> |
||||
); |
||||
} |
||||
@ -0,0 +1,168 @@ |
||||
import { Modal } from '../Modal.tsx'; |
||||
import { useEffect, useState } from 'react'; |
||||
import { |
||||
deleteOpenAIKey, |
||||
getOpenAIKey, |
||||
saveOpenAIKey, |
||||
} from '../../lib/jwt.ts'; |
||||
import { cn } from '../../lib/classname.ts'; |
||||
import { CloseIcon } from '../ReactIcons/CloseIcon.tsx'; |
||||
import { useToast } from '../../hooks/use-toast.ts'; |
||||
import { httpPost } from '../../lib/http.ts'; |
||||
|
||||
type OpenAISettingsProps = { |
||||
onClose: () => void; |
||||
}; |
||||
|
||||
export function OpenAISettings(props: OpenAISettingsProps) { |
||||
const { onClose } = props; |
||||
|
||||
const [defaultOpenAIKey, setDefaultOpenAIKey] = useState(''); |
||||
|
||||
const [hasError, setHasError] = useState(false); |
||||
const [openaiApiKey, setOpenaiApiKey] = useState(''); |
||||
const [isLoading, setIsLoading] = useState(false); |
||||
|
||||
const toast = useToast(); |
||||
|
||||
useEffect(() => { |
||||
const apiKey = getOpenAIKey(); |
||||
setOpenaiApiKey(apiKey || ''); |
||||
setDefaultOpenAIKey(apiKey || ''); |
||||
}, []); |
||||
|
||||
return ( |
||||
<Modal onClose={onClose}> |
||||
<div className="p-5"> |
||||
<h2 className="text-xl font-medium text-gray-800">OpenAI Settings</h2> |
||||
<div className="mt-4"> |
||||
<p className="text-gray-700"> |
||||
AI Roadmap generator uses OpenAI's GPT-4 model to generate roadmaps. |
||||
</p> |
||||
|
||||
<p className="mt-2"> |
||||
<a |
||||
className="font-semibold underline underline-offset-2" |
||||
href={'https://platform.openai.com/signup'} |
||||
target="_blank" |
||||
> |
||||
Create an account on OpenAI |
||||
</a>{' '} |
||||
and enter your API key below to enable the AI Roadmap generator |
||||
</p> |
||||
|
||||
<form |
||||
className="mt-4" |
||||
onSubmit={async (e) => { |
||||
e.preventDefault(); |
||||
setHasError(false); |
||||
|
||||
const normalizedKey = openaiApiKey.trim(); |
||||
if (!normalizedKey) { |
||||
deleteOpenAIKey(); |
||||
toast.success('OpenAI API key removed'); |
||||
onClose(); |
||||
return; |
||||
} |
||||
|
||||
if (!normalizedKey.startsWith('sk-')) { |
||||
setHasError(true); |
||||
return; |
||||
} |
||||
|
||||
setIsLoading(true); |
||||
const { response, error } = await httpPost( |
||||
`${import.meta.env.PUBLIC_API_URL}/v1-validate-openai-key`, |
||||
{ |
||||
key: normalizedKey, |
||||
}, |
||||
); |
||||
|
||||
if (error) { |
||||
setHasError(true); |
||||
setIsLoading(false); |
||||
return; |
||||
} |
||||
|
||||
// Save the API key to cookies
|
||||
saveOpenAIKey(normalizedKey); |
||||
toast.success('OpenAI API key saved'); |
||||
onClose(); |
||||
}} |
||||
> |
||||
<div className="relative"> |
||||
<input |
||||
type="text" |
||||
name="openai-api-key" |
||||
id="openai-api-key" |
||||
className={cn( |
||||
'block w-full rounded-md border border-gray-300 px-3 py-2 text-gray-800 transition-colors focus:border-black focus:outline-none', |
||||
{ |
||||
'border-red-500 bg-red-100 focus:border-red-500': hasError, |
||||
}, |
||||
)} |
||||
placeholder="Enter your OpenAI API key" |
||||
value={openaiApiKey} |
||||
onChange={(e) => { |
||||
setHasError(false); |
||||
setOpenaiApiKey((e.target as HTMLInputElement).value); |
||||
}} |
||||
/> |
||||
|
||||
{openaiApiKey && ( |
||||
<button |
||||
type={'button'} |
||||
onClick={() => { |
||||
setOpenaiApiKey(''); |
||||
}} |
||||
className="absolute right-2 top-1/2 flex h-[20px] w-[20px] -translate-y-1/2 items-center justify-center rounded-full bg-gray-400 text-white hover:bg-gray-600" |
||||
> |
||||
<CloseIcon className="h-[13px] w-[13px] stroke-[3.5]" /> |
||||
</button> |
||||
)} |
||||
</div> |
||||
{hasError && ( |
||||
<p className="mt-2 text-sm text-red-500"> |
||||
Please enter a valid OpenAI API key |
||||
</p> |
||||
)} |
||||
<button |
||||
disabled={isLoading} |
||||
type="submit" |
||||
className={ |
||||
'mt-2 w-full rounded-md bg-gray-700 px-4 py-2 text-white transition-colors hover:bg-black disabled:cursor-not-allowed disabled:opacity-50' |
||||
} |
||||
> |
||||
{!isLoading && 'Save'} |
||||
{isLoading && 'Validating ..'} |
||||
</button> |
||||
{!defaultOpenAIKey && ( |
||||
<button |
||||
type="button" |
||||
onClick={() => { |
||||
onClose(); |
||||
}} |
||||
className="mt-1 w-full rounded-md bg-red-500 px-4 py-2 text-white transition-colors hover:bg-black hover:bg-red-700" |
||||
> |
||||
Cancel |
||||
</button> |
||||
)} |
||||
{defaultOpenAIKey && ( |
||||
<button |
||||
type="button" |
||||
onClick={() => { |
||||
deleteOpenAIKey(); |
||||
onClose(); |
||||
toast.success('OpenAI API key removed'); |
||||
}} |
||||
className="mt-1 w-full rounded-md bg-red-500 px-4 py-2 text-white transition-colors hover:bg-black hover:bg-red-700" |
||||
> |
||||
Reset to Default Key |
||||
</button> |
||||
)} |
||||
</form> |
||||
</div> |
||||
</div> |
||||
</Modal> |
||||
); |
||||
} |
||||
@ -0,0 +1,241 @@ |
||||
import { useEffect, useMemo, useRef, useState } from 'react'; |
||||
|
||||
import { useKeydown } from '../../hooks/use-keydown'; |
||||
import { useOutsideClick } from '../../hooks/use-outside-click'; |
||||
import { markdownToHtml } from '../../lib/markdown'; |
||||
import { Ban, Cog, FileText, X } from 'lucide-react'; |
||||
import { Spinner } from '../ReactIcons/Spinner'; |
||||
import type { RoadmapNodeDetails } from './GenerateRoadmap'; |
||||
import { getOpenAIKey, isLoggedIn, removeAuthToken } from '../../lib/jwt'; |
||||
import { readAIRoadmapContentStream } from '../../helper/read-stream'; |
||||
import { cn } from '../../lib/classname'; |
||||
import { showLoginPopup } from '../../lib/popup'; |
||||
import { OpenAISettings } from './OpenAISettings.tsx'; |
||||
|
||||
type RoadmapTopicDetailProps = RoadmapNodeDetails & { |
||||
onClose?: () => void; |
||||
roadmapId: string; |
||||
topicLimitUsed: number; |
||||
topicLimit: number; |
||||
onTopicContentGenerateComplete?: () => void; |
||||
onConfigureOpenAI?: () => void; |
||||
}; |
||||
|
||||
export function RoadmapTopicDetail(props: RoadmapTopicDetailProps) { |
||||
const { |
||||
onClose, |
||||
roadmapId, |
||||
nodeTitle, |
||||
parentTitle, |
||||
topicLimit, |
||||
topicLimitUsed, |
||||
onTopicContentGenerateComplete, |
||||
onConfigureOpenAI, |
||||
} = props; |
||||
|
||||
const [isLoading, setIsLoading] = useState(false); |
||||
const [error, setError] = useState(''); |
||||
const [topicHtml, setTopicHtml] = useState(''); |
||||
|
||||
const topicRef = useRef<HTMLDivElement>(null); |
||||
|
||||
const abortController = useMemo(() => new AbortController(), []); |
||||
const generateAiRoadmapTopicContent = async () => { |
||||
setIsLoading(true); |
||||
setError(''); |
||||
//
|
||||
// if (topicLimitUsed >= topicLimit) {
|
||||
// setError('Maximum limit reached');
|
||||
// setIsLoading(false);
|
||||
// return;
|
||||
// }
|
||||
|
||||
if (!roadmapId || !nodeTitle) { |
||||
setIsLoading(false); |
||||
setError('Invalid roadmap id or node title'); |
||||
return; |
||||
} |
||||
|
||||
const response = await fetch( |
||||
`${import.meta.env.PUBLIC_API_URL}/v1-generate-ai-roadmap-content/${roadmapId}`, |
||||
{ |
||||
method: 'POST', |
||||
headers: { |
||||
'Content-Type': 'application/json', |
||||
}, |
||||
credentials: 'include', |
||||
body: JSON.stringify({ |
||||
nodeTitle, |
||||
parentTitle, |
||||
}), |
||||
signal: abortController.signal, |
||||
}, |
||||
); |
||||
|
||||
if (!response.ok) { |
||||
const data = await response.json(); |
||||
|
||||
setError(data?.message || 'Something went wrong'); |
||||
setIsLoading(false); |
||||
|
||||
// Logout user if token is invalid
|
||||
if (data.status === 401) { |
||||
removeAuthToken(); |
||||
window.location.reload(); |
||||
} |
||||
} |
||||
const reader = response.body?.getReader(); |
||||
|
||||
if (!reader) { |
||||
setIsLoading(false); |
||||
setError('Something went wrong'); |
||||
return; |
||||
} |
||||
|
||||
setIsLoading(false); |
||||
await readAIRoadmapContentStream(reader, { |
||||
onStream: async (result) => { |
||||
setTopicHtml(markdownToHtml(result, false)); |
||||
}, |
||||
}); |
||||
onTopicContentGenerateComplete?.(); |
||||
}; |
||||
|
||||
// Close the topic detail when user clicks outside the topic detail
|
||||
useOutsideClick(topicRef, () => { |
||||
onClose?.(); |
||||
}); |
||||
|
||||
useKeydown('Escape', () => { |
||||
onClose?.(); |
||||
}); |
||||
|
||||
useEffect(() => { |
||||
if (!topicRef?.current) { |
||||
return; |
||||
} |
||||
|
||||
topicRef?.current?.focus(); |
||||
generateAiRoadmapTopicContent().finally(() => {}); |
||||
|
||||
return () => { |
||||
abortController.abort(); |
||||
}; |
||||
}, []); |
||||
|
||||
const hasContent = topicHtml?.length > 0; |
||||
const openAIKey = getOpenAIKey(); |
||||
|
||||
return ( |
||||
<div className={'relative z-50'}> |
||||
<div |
||||
ref={topicRef} |
||||
tabIndex={0} |
||||
className="fixed right-0 top-0 z-40 h-screen w-full overflow-y-auto bg-white p-4 focus:outline-0 sm:max-w-[600px] sm:p-6" |
||||
> |
||||
<div className="flex flex-col items-start gap-2 sm:flex-row"> |
||||
<span> |
||||
<span |
||||
className={cn( |
||||
'mr-0.5 inline-block rounded-xl border px-1.5 text-center text-sm tabular-nums text-gray-800', |
||||
{ |
||||
'animate-pulse border-zinc-300 bg-zinc-300 text-zinc-300': |
||||
!topicLimit, |
||||
}, |
||||
)} |
||||
> |
||||
{topicLimitUsed} of {topicLimit} |
||||
</span>{' '} |
||||
topics generated |
||||
</span> |
||||
{!isLoggedIn() && ( |
||||
<button |
||||
className="rounded-xl border border-current px-1.5 py-0.5 text-left text-sm font-medium text-blue-500 sm:text-center" |
||||
onClick={showLoginPopup} |
||||
> |
||||
Generate more by <span className="font-semibold">logging in</span> |
||||
</button> |
||||
)} |
||||
{isLoggedIn() && !openAIKey && ( |
||||
<button |
||||
className="rounded-xl border border-current px-1.5 py-0.5 text-left text-sm font-medium text-blue-500 sm:text-center" |
||||
onClick={onConfigureOpenAI} |
||||
> |
||||
By-pass all limits by{' '} |
||||
<span className="font-semibold">adding your own OpenAI Key</span> |
||||
</button> |
||||
)} |
||||
{isLoggedIn() && openAIKey && ( |
||||
<button |
||||
className="flex items-center gap-1 rounded-xl border border-current px-1.5 py-0.5 text-left text-sm font-medium text-blue-500 sm:text-center" |
||||
onClick={onConfigureOpenAI} |
||||
> |
||||
<Cog className="-mt-0.5 inline-block h-4 w-4" /> |
||||
Configure OpenAI Key |
||||
</button> |
||||
)} |
||||
</div> |
||||
|
||||
{isLoading && ( |
||||
<div className="mt-6 flex w-full justify-center"> |
||||
<Spinner |
||||
outerFill="#d1d5db" |
||||
className="h-6 w-6 sm:h-12 sm:w-12" |
||||
innerFill="#2563eb" |
||||
/> |
||||
</div> |
||||
)} |
||||
|
||||
{!isLoading && !error && ( |
||||
<> |
||||
<div className="mb-2"> |
||||
<button |
||||
type="button" |
||||
id="close-topic" |
||||
className="absolute right-2.5 top-2.5 inline-flex items-center rounded-lg bg-transparent p-1.5 text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900" |
||||
onClick={onClose} |
||||
> |
||||
<X className="h-5 w-5" /> |
||||
</button> |
||||
</div> |
||||
|
||||
{hasContent ? ( |
||||
<div className="prose prose-quoteless prose-h1:mb-2.5 prose-h1:mt-7 prose-h2:mb-3 prose-h2:mt-0 prose-h3:mb-[5px] prose-h3:mt-[10px] prose-p:mb-2 prose-p:mt-0 prose-blockquote:font-normal prose-blockquote:not-italic prose-blockquote:text-gray-700 prose-li:m-0 prose-li:mb-0.5"> |
||||
<div |
||||
id="topic-content" |
||||
dangerouslySetInnerHTML={{ __html: topicHtml }} |
||||
/> |
||||
</div> |
||||
) : ( |
||||
<div className="flex h-[calc(100%-38px)] flex-col items-center justify-center"> |
||||
<FileText className="h-16 w-16 text-gray-300" /> |
||||
<p className="mt-2 text-lg font-medium text-gray-500"> |
||||
Empty Content |
||||
</p> |
||||
</div> |
||||
)} |
||||
</> |
||||
)} |
||||
|
||||
{/* Error */} |
||||
{!isLoading && error && ( |
||||
<> |
||||
<button |
||||
type="button" |
||||
id="close-topic" |
||||
className="absolute right-2.5 top-2.5 inline-flex items-center rounded-lg bg-transparent p-1.5 text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900" |
||||
onClick={onClose} |
||||
> |
||||
<X className="h-5 w-5" /> |
||||
</button> |
||||
<div className="flex h-full flex-col items-center justify-center"> |
||||
<Ban className="h-16 w-16 text-red-500" /> |
||||
<p className="mt-2 text-lg font-medium text-red-500">{error}</p> |
||||
</div> |
||||
</> |
||||
)} |
||||
</div> |
||||
<div className="fixed inset-0 z-30 bg-gray-900 bg-opacity-50 dark:bg-opacity-80"></div> |
||||
</div> |
||||
); |
||||
} |
||||
@ -0,0 +1,10 @@ |
||||
--- |
||||
import LoginPopup from '../../components/AuthenticationFlow/LoginPopup.astro'; |
||||
import { ExploreAIRoadmap } from '../../components/ExploreAIRoadmap/ExploreAIRoadmap'; |
||||
import AccountLayout from '../../layouts/AccountLayout.astro'; |
||||
--- |
||||
|
||||
<AccountLayout title='Explore Roadmap AI'> |
||||
<ExploreAIRoadmap client:load /> |
||||
<LoginPopup /> |
||||
</AccountLayout> |
||||
Loading…
Reference in new issue