diff --git a/src/App.tsx b/src/App.tsx index b3462c0..85ede74 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -14,6 +14,7 @@ import useAppStore from "./store/store"; import SampleDropdown from "./components/SampleDropdown"; import FullScreenModal from "./components/FullScreenModal"; import UseShare from "./components/UseShare"; +import LearnContent from "./components/Content"; const { Content } = Layout; const { useBreakpoint } = Grid; @@ -146,8 +147,19 @@ const App = () => { } /> - } /> - } /> + + }> + {/* ❕ learning-module routes */} + } /> + } + /> + } + /> + diff --git a/src/components/Content.tsx b/src/components/Content.tsx index e17bcf3..b34f669 100644 --- a/src/components/Content.tsx +++ b/src/components/Content.tsx @@ -1,5 +1,4 @@ import React, { useEffect, useState } from "react"; -import { useParams, useNavigate } from "react-router-dom"; import ReactMarkdown from "react-markdown"; import { ContentContainer, @@ -10,22 +9,26 @@ import { LoadingOutlined } from "@ant-design/icons"; import { Spin } from "antd"; import fetchContent from "../utils/fetchContent"; -const Content: React.FC = () => { - const { step } = useParams<{ step: string }>(); - const navigate = useNavigate(); +interface LearnContentProps { + file: string; +} + +const LearnContent: React.FC = ({ file }) => { const [content, setContent] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); - // ⚠️ should be updated only based on actual steps and new contents - const steps = ["intro.md", "module1.md", "module2.md"]; + const steps = [ + { title: "Introduction", link: "/learn/intro" }, + { title: "Module 1", link: "/learn/module1" }, + { title: "Module 2", link: "/learn/module2" }, + ]; useEffect(() => { const loadContent = async () => { - if (!step) return; try { setLoading(true); - const content = await fetchContent(`${step}`); + const content = await fetchContent(file); setContent(content); setError(null); } catch (err: any) { @@ -36,23 +39,25 @@ const Content: React.FC = () => { }; loadContent(); - }, [step]); + }, [file]); - const currentIndex = steps.indexOf(step ?? ""); + const currentIndex = steps.findIndex((step) => + step.link.includes(file.split(".")[0]) + ); const handlePrevious = () => { if (currentIndex > 0) { - navigate(`/learn-now/${steps[currentIndex - 1]}`); + window.location.href = steps[currentIndex - 1].link; } }; const handleNext = () => { if (currentIndex < steps.length - 1) { - navigate(`/learn-now/${steps[currentIndex + 1]}`); + window.location.href = steps[currentIndex + 1].link; } }; - if (loading) + if (loading) { return ( { /> ); - if (error) return {error}; + } + + if (error) { + return Error: {error}; + } return ( @@ -92,4 +101,4 @@ const Content: React.FC = () => { ); }; -export default Content; +export default LearnContent; diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index fa6ad8f..e093c22 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -1,6 +1,7 @@ import { useState } from "react"; -import { Menu, Dropdown, Button, Image, Grid, Typography } from "antd"; +import { Menu, Dropdown, Button, Image, Grid } from "antd"; import { useSpring, animated } from "react-spring"; +import { useLocation, Link } from "react-router-dom"; import { GithubOutlined, QuestionOutlined, @@ -11,13 +12,13 @@ import { } from "@ant-design/icons"; const { useBreakpoint } = Grid; -const { Link } = Typography; function Navbar({ scrollToExplore }: { scrollToExplore: any }) { const [hovered, setHovered] = useState< null | "home" | "explore" | "help" | "github" | "join" >(null); const screens = useBreakpoint(); + const location = useLocation(); const props = useSpring({ to: async (next) => { @@ -94,6 +95,8 @@ function Navbar({ scrollToExplore }: { scrollToExplore: any }) { screens.md && !isLast ? "1.5px solid rgba(255, 255, 255, 0.1)" : "none", }); + const isLearnPage = location.pathname.startsWith("/learn"); + return ( setHovered(null)} > @@ -182,36 +184,38 @@ function Navbar({ scrollToExplore }: { scrollToExplore: any }) { height: "65px", }} > - setHovered("join")} - onMouseLeave={() => setHovered(null)} - > - - - Learn - - - + {!isLearnPage && ( + setHovered("join")} + onMouseLeave={() => setHovered(null)} + > + + + Learn + + + + )} = ({ {steps.map((step, index) => ( - + {step.title} diff --git a/src/pages/LearnNow.tsx b/src/pages/LearnNow.tsx index bb883a8..4063d17 100644 --- a/src/pages/LearnNow.tsx +++ b/src/pages/LearnNow.tsx @@ -1,69 +1,21 @@ -import React, { useEffect, useState } from "react"; -import { useParams, useNavigate } from "react-router-dom"; +import React from "react"; +import { Outlet } from "react-router-dom"; import Sidebar from "../components/Sidebar"; -import { LoadingOutlined } from "@ant-design/icons"; -import { Spin } from "antd"; -import Content from "../components/Content"; -import fetchContent from "../utils/fetchContent"; import { LearnNowContainer } from "../styles/pages/LearnNow"; -const LearnNow: React.FC = () => { - const { step } = useParams<{ step: string }>(); - const navigate = useNavigate(); - const [steps, setSteps] = useState<{ title: string; link: string }[]>([]); - const [loading, setLoading] = useState(true); - const [error, setError] = useState(null); - - useEffect(() => { - async function loadContent() { - try { - const stepLinks = ["intro.md", "module1.md", "module2.md"]; - const stepTitles = ["Introduction", "Module 1", "Module 2"]; - - setSteps( - stepTitles.map((title, index) => ({ title, link: stepLinks[index] })) - ); - - await fetchContent(step || "intro.md"); - } catch (err: any) { - setError("Failed to load content"); - } finally { - setLoading(false); - } - } - - loadContent(); - }, [step]); - - useEffect(() => { - if (!step) { - navigate("/learn-now/intro.md"); - } - }, [step, navigate]); - - if (loading) - return ( - - - } - /> - - ); - if (error) return Error: {error}; +const steps = [ + { title: "Introduction", link: "/learn/intro" }, + { title: "Module 1", link: "/learn/module1" }, + { title: "Module 2", link: "/learn/module2" }, +]; +const LearnNow: React.FC = () => { return ( - + + + ); }; diff --git a/src/styles/components/Sidebar.ts b/src/styles/components/Sidebar.ts index 49bd3db..9056665 100644 --- a/src/styles/components/Sidebar.ts +++ b/src/styles/components/Sidebar.ts @@ -1,7 +1,7 @@ import styled from "styled-components"; export const SidebarContainer = styled.div` - width: 220px; + width: 260px; background-color: #f5f5f5; padding: 1rem; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);