mirror of
https://github.com/kamranahmedse/developer-roadmap.git
synced 2025-08-22 00:43:01 +02:00
Fix flickering issue
This commit is contained in:
@@ -365,54 +365,58 @@ const groups: GroupType[] = [
|
||||
},
|
||||
];
|
||||
|
||||
const roleRoadmaps = groups.flatMap((group) =>
|
||||
group.roadmaps.filter((roadmap) => roadmap.type === 'role'),
|
||||
);
|
||||
const skillRoadmaps = groups.flatMap((group) =>
|
||||
group.roadmaps.filter((roadmap) => roadmap.type === 'skill'),
|
||||
);
|
||||
|
||||
const allGroups = [
|
||||
{
|
||||
group: 'Role Based Roadmaps',
|
||||
roadmaps: roleRoadmaps,
|
||||
},
|
||||
{
|
||||
group: 'Skill Based Roadmaps',
|
||||
roadmaps: skillRoadmaps,
|
||||
},
|
||||
];
|
||||
|
||||
export function RoadmapsPage() {
|
||||
const [activeGroup, setActiveGroup] = useState<AllowGroupNames>('');
|
||||
const [visibleGroups, setVisibleGroups] = useState<GroupType[]>([]);
|
||||
const [visibleGroups, setVisibleGroups] = useState<GroupType[]>(allGroups);
|
||||
|
||||
useEffect(() => {
|
||||
if (!activeGroup) {
|
||||
const roleRoadmaps = groups.flatMap((group) =>
|
||||
group.roadmaps.filter((roadmap) => roadmap.type === 'role'),
|
||||
);
|
||||
const skillRoadmaps = groups.flatMap((group) =>
|
||||
group.roadmaps.filter((roadmap) => roadmap.type === 'skill'),
|
||||
);
|
||||
|
||||
setVisibleGroups([
|
||||
{
|
||||
group: 'Role Based Roadmaps',
|
||||
roadmaps: roleRoadmaps,
|
||||
},
|
||||
{
|
||||
group: 'Skill Based Roadmaps',
|
||||
roadmaps: skillRoadmaps,
|
||||
},
|
||||
]);
|
||||
} else {
|
||||
const group = groups.find((group) => group.group === activeGroup);
|
||||
|
||||
if (group) {
|
||||
// other groups that have a roadmap that is in the same group
|
||||
const otherGroups = groups.filter((g) => {
|
||||
return (
|
||||
g.group !== group.group &&
|
||||
g.roadmaps.some((roadmap) => {
|
||||
return roadmap.otherGroups?.includes(group.group);
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
setVisibleGroups([
|
||||
group,
|
||||
...otherGroups.map((g) => ({
|
||||
...g,
|
||||
roadmaps: g.roadmaps.filter((roadmap) =>
|
||||
roadmap.otherGroups?.includes(group.group),
|
||||
),
|
||||
})),
|
||||
]);
|
||||
}
|
||||
setVisibleGroups(allGroups);
|
||||
return;
|
||||
}
|
||||
|
||||
const group = groups.find((group) => group.group === activeGroup);
|
||||
if (!group) {
|
||||
return;
|
||||
}
|
||||
|
||||
// other groups that have a roadmap that is in the same group
|
||||
const otherGroups = groups.filter((g) => {
|
||||
return (
|
||||
g.group !== group.group &&
|
||||
g.roadmaps.some((roadmap) => {
|
||||
return roadmap.otherGroups?.includes(group.group);
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
setVisibleGroups([
|
||||
group,
|
||||
...otherGroups.map((g) => ({
|
||||
...g,
|
||||
roadmaps: g.roadmaps.filter((roadmap) =>
|
||||
roadmap.otherGroups?.includes(group.group),
|
||||
),
|
||||
})),
|
||||
]);
|
||||
}, [activeGroup]);
|
||||
|
||||
return (
|
||||
|
28
src/components/Roadmaps/RoadmapsPageHeader.tsx
Normal file
28
src/components/Roadmaps/RoadmapsPageHeader.tsx
Normal file
@@ -0,0 +1,28 @@
|
||||
export function RoadmapsPageHeader() {
|
||||
return (
|
||||
<div className="bg-white py-12">
|
||||
<div className="container">
|
||||
<div className="flex flex-col items-center bg-white">
|
||||
<h1 className="text-5xl font-bold">Developer Roadmaps</h1>
|
||||
<p className="my-3 text-lg">
|
||||
Browse ever-growing list of up-to-date, community driven roadmaps
|
||||
</p>
|
||||
<p className="flex flex-row gap-3">
|
||||
<a
|
||||
className="inline-block rounded-md bg-black px-3.5 py-1.5 text-base text-white"
|
||||
href="#"
|
||||
>
|
||||
Draw your own roadmap
|
||||
</a>
|
||||
<a
|
||||
className="inline-block rounded-md bg-gray-300 px-3.5 py-1.5 text-base text-black"
|
||||
href="#"
|
||||
>
|
||||
Generate Roadmap with AI
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
@@ -1,5 +1,6 @@
|
||||
---
|
||||
import { RoadmapsPage } from '../components/Roadmaps/RoadmapsPage';
|
||||
import { RoadmapsPageHeader } from '../components/Roadmaps/RoadmapsPageHeader';
|
||||
import GridItem from '../components/GridItem.astro';
|
||||
import SimplePageHeader from '../components/SimplePageHeader.astro';
|
||||
import BaseLayout from '../layouts/BaseLayout.astro';
|
||||
@@ -11,32 +12,6 @@ import { getRoadmapsByTag } from '../lib/roadmap';
|
||||
description={'Step by step guides and paths to learn different tools or technologies'}
|
||||
permalink={'/roadmaps'}
|
||||
>
|
||||
<div class=''>
|
||||
<div class='bg-white py-12'>
|
||||
<div class='container'>
|
||||
<div class='flex flex-col items-center bg-white'>
|
||||
<h1 class='text-5xl font-bold'>Developer Roadmaps</h1>
|
||||
<p class='my-3 text-lg'>
|
||||
Browse ever-growing list of up-to-date, community driven roadmaps
|
||||
</p>
|
||||
<p class='flex flex-row gap-3'>
|
||||
<a
|
||||
class='inline-block rounded-md bg-black px-3.5 py-1.5 text-base text-white'
|
||||
href='#'
|
||||
>
|
||||
Draw your own roadmap
|
||||
</a>
|
||||
<a
|
||||
class='inline-block rounded-md bg-gray-300 px-3.5 py-1.5 text-base text-black'
|
||||
href='#'
|
||||
>
|
||||
Generate Roadmap with AI
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<RoadmapsPage client:load />
|
||||
</div>
|
||||
<RoadmapsPageHeader client:load />
|
||||
<RoadmapsPage client:load />
|
||||
</BaseLayout>
|
||||
|
Reference in New Issue
Block a user