feat: add navigation between version 1 and 2

src/app/components/Main.module.css

@@ -0,0 +1,15 @@
+.container {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  margin: 0 auto;
+  overflow-y: auto;
+}
+
+.divider {
+  width: 100%;
+  height: 1px;
+  background-color: #848586;
+}

src/app/components/Main.tsx

@@ -0,0 +1,23 @@
+import { DocSection } from '../types/types';
+import styles from './Main.module.css';
+import Section from './Section';
+
+export default function Main({
+  versionSections,
+}: {
+  versionSections: DocSection[];
+}) {
+  return (
+    <main className={styles.container}>
+      {versionSections.map(section => (
+        <>
+          <Section key={section.title}>
+            {section.copy}
+            {section.example}
+          </Section>
+          <div className={styles.divider}>&nbsp;</div>
+        </>
+      ))}
+    </main>
+  );
+}

src/app/components/NavBar.tsx

@@ -2,17 +2,26 @@
 
 import Link from 'next/link.js';
 import { useState } from 'react';
+import { DocsStructure } from '../types/types.js';
 import styles from './NavBar.module.css';
 
-function NavbarDropdown() {
-  const versions = ['Version 1', 'Version 2'];
+function NavbarDropdown({ version }: { version: string }) {
+  const versions = {
+    version_001: {
+      name: 'Version 1',
+      path: '/version-1',
+    },
+    version_002: {
+      name: 'Version 2',
+      path: '/',
+    },
+  } as { [key: string]: { name: string; path: string } };
+
+  const currentVersion = versions[version];
 
   const [isDropdownOpen, setIsDropdownOpen] =
     useState<boolean>(false);
 
-  const [version, setVersion] =
-    useState<string>('Version 2');
-
   const handleDropdownToggle = () => {
     setIsDropdownOpen(!isDropdownOpen);
   };
@@ -23,7 +32,7 @@ function NavbarDropdown() {
         className={styles.navLink}
         onClick={handleDropdownToggle}
       >
-        {version}{' '}
+        {currentVersion.name}{' '}
         {isDropdownOpen ? (
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -61,31 +70,35 @@ function NavbarDropdown() {
             : styles.dropdownMenu
         }
       >
-        {versions
+        {Object.keys(versions)
           .filter(v => v !== version)
           .map(v => (
-            <a
+            <Link
+              href={`${versions[v].path}`}
               key={v}
               className={styles.navLink}
               onClick={() => {
-                setVersion(v);
                 setIsDropdownOpen(false);
               }}
             >
-              {v}
-            </a>
+              {versions[v].name}
+            </Link>
           ))}
       </div>
     </>
   );
 }
 
-export default function NavBar() {
+export default function NavBar({
+  version,
+}: {
+  version: DocsStructure;
+}) {
   return (
     <nav className={styles.nav}>
       <ul className={styles.navList}>
         <li className={styles.navItem}>
-          <NavbarDropdown />
+          <NavbarDropdown version={version.version} />
         </li>
         <li className={styles.navItem}>
           <Link

src/app/components/SideBar.tsx

@@ -76,11 +76,9 @@ function ListTree({ docs }: { docs: Doc[] }) {
 }
 
 export default function SideBar({
-  versionOne,
-  versionTwo,
+  version,
 }: {
-  versionOne: DocsStructure;
-  versionTwo: DocsStructure;
+  version: DocsStructure;
 }) {
   return (
     <div className={styles.container}>
@@ -88,7 +86,7 @@ export default function SideBar({
         <span className={styles.onspring}>Onspring</span>{' '}
         <span className={styles.api}>API</span>
       </h1>
-      <ListTree docs={versionTwo.docs} />
+      <ListTree docs={version.docs} />
     </div>
   );
 }