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

feat: add footer for ai generated roadmaps (#5461)

Browse Source 
* feat: add footer for ai generated roadmaps

* fix: add layout in explore page
This commit is contained in:
Arik Chakma
2024-04-04 01:57:50 +06:00
committed by GitHub
parent 6e81855645
commit abad548961
4 changed files with 16 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/GenerateRoadmap/GenerateRoadmap.tsx
View File

@@ -113,7 +113,9 @@ export function GenerateRoadmap() {
const [roadmapTopicLimitUsed, setRoadmapTopicLimitUsed] = useState(0);
const [isConfiguring, setIsConfiguring] = useState(false);
const [openAPIKey, setOpenAPIKey] = useState<string | undefined>(getOpenAIKey());
const [openAPIKey, setOpenAPIKey] = useState<string | undefined>(
getOpenAIKey(),
);
const isKeyOnly = IS_KEY_ONLY_ROADMAP_GENERATION;
const isAuthenticatedUser = isLoggedIn();
@@ -658,7 +660,7 @@ export function GenerateRoadmap() {
</div>
<div
className={cn({
'relative mb-20 max-h-[800px] min-h-[800px] sm:max-h-[1000px] md:min-h-[1000px] lg:max-h-[1200px] lg:min-h-[1200px] overflow-hidden':
'relative mb-20 max-h-[800px] min-h-[800px] overflow-hidden sm:max-h-[1000px] md:min-h-[1000px] lg:max-h-[1200px] lg:min-h-[1200px]':
!isAuthenticatedUser,
})}
>
@@ -666,18 +668,18 @@ export function GenerateRoadmap() {
ref={roadmapContainerRef}
id="roadmap-container"
onClick={handleNodeClick}
className="relative px-4 py-5 [&>svg]:mx-auto [&>svg]:max-w-[1300px]"
className="relative min-h-[400px] px-4 py-5 [&>svg]:mx-auto [&>svg]:max-w-[1300px]"
/>
{!isAuthenticatedUser && (
<div className="absolute bottom-0 left-0 right-0">
<div className="h-80 w-full bg-gradient-to-t from-gray-100 to-transparent" />
<div className="bg-gray-100">
<div className="mx-auto px-5 max-w-[600px] flex-col items-center justify-center bg-gray-100 pt-px">
<div className="mx-auto max-w-[600px] flex-col items-center justify-center bg-gray-100 px-5 pt-px">
<div className="mt-8 text-center">
<h2 className="mb-0.5 sm:mb-3 text-xl sm:text-2xl font-medium">
<h2 className="mb-0.5 text-xl font-medium sm:mb-3 sm:text-2xl">
Sign up to View the full roadmap
</h2>
<p className="mb-6 text-sm sm:text-base text-gray-600 text-balance">
<p className="mb-6 text-balance text-sm text-gray-600 sm:text-base">
You must be logged in to view the complete roadmap
</p>
</div>

4
src/components/GenerateRoadmap/RoadmapSearch.tsx
View File

@@ -45,7 +45,7 @@ export function RoadmapSearch(props: RoadmapSearchProps) {
const randomTerms = ['OAuth', 'APIs', 'UX Design', 'gRPC'];
return (
<div className="flex flex-grow flex-col items-center px-4 py-6 sm:px-6">
<div className="flex flex-grow flex-col items-center px-4 py-6 sm:px-6 md:my-24 lg:my-32">
{isConfiguring && (
<IncreaseRoadmapLimit
onClose={() => {
@@ -55,7 +55,7 @@ export function RoadmapSearch(props: RoadmapSearchProps) {
}}
/>
)}
<div className="flex flex-col gap-0 text-center sm:gap-2 md:mt-24 lg:mt-32">
<div className="flex flex-col gap-0 text-center sm:gap-2">
<h1 className="relative text-2xl font-medium sm:text-3xl">
<span className="hidden sm:inline">Generate roadmaps with AI</span>
<span className="inline sm:hidden">AI Roadmap Generator</span>

7
src/pages/ai/explore.astro
View File

@@ -1,9 +1,8 @@
---
import LoginPopup from '../../components/AuthenticationFlow/LoginPopup.astro';
import { ExploreAIRoadmap } from '../../components/ExploreAIRoadmap/ExploreAIRoadmap';
import AccountLayout from '../../layouts/AccountLayout.astro';
import BaseLayout from '../../layouts/BaseLayout.astro';
---
<AccountLayout title='Explore AI Generated Roadmaps'>
<BaseLayout title='Explore AI Generated Roadmaps'>
<ExploreAIRoadmap client:load />
</AccountLayout>
</BaseLayout>

8
src/pages/ai/index.astro
View File

@@ -1,10 +1,8 @@
---
import LoginPopup from '../../components/AuthenticationFlow/LoginPopup.astro';
import { GenerateRoadmap } from '../../components/GenerateRoadmap/GenerateRoadmap';
import AccountLayout from '../../layouts/AccountLayout.astro';
import BaseLayout from '../../layouts/BaseLayout.astro';
---
<AccountLayout title='Roadmap AI'>
<BaseLayout title='Roadmap AI'>
<GenerateRoadmap client:load />
<LoginPopup />
</AccountLayout>
</BaseLayout>