Added components like Return buttons and Navoption

src/components/Panels/MainPanel.tsx

@@ -1,26 +1,10 @@
 import Link from 'next/link'
-import { useRouter } from 'next/router'
 import styles from 'styles/Panels/MainPanel.module.css'
 import panelStyles from 'styles/Panels/Panels.module.css'
+import NavOption from 'components/Panels/NavOption'
 
 export default function MainPanel() {
 
-  const router = useRouter();
-
-  function generateMenuOption(url: string, icon: string, title: string, subtitle?: string) {
-    console.log(router.asPath, url)
-    const classActive = router.asPath.startsWith(url) ? panelStyles.active : null;
-    return (
-      <Link href={url} passHref>
-          <div className={[panelStyles.menuOption, classActive].join(' ')}>
-            <img src={icon} alt="" />
-            <h3>{title}</h3>
-            <p>{subtitle}</p>
-          </div>
-      </Link>
-    )
-  }
-
   return (
 
     <div className={[panelStyles.panel, styles.panel].join(' ')}>
@@ -36,16 +20,52 @@ export default function MainPanel() {
 
       <hr />
 
-      {generateMenuOption("/library", "/icons/book-solid.svg", "Library", "Browse all physical and digital media")}
-      {generateMenuOption("/hubs", "/icons/hubs.svg", "Hubs", "Explore all content of a specific game/series")}
-      {generateMenuOption("/chronology", "/icons/timeline-solid.svg", "Chronology", "Follow all events in chronological order")}
+      <NavOption 
+        url="/library" 
+        icon="/icons/book-solid.svg" 
+        title="Library" 
+        subtitle="Browse all physical and digital media"
+      />
+      
+      <NavOption 
+        url="/hubs" 
+        icon="/icons/hubs.svg" 
+        title="Hubs" 
+        subtitle="Explore all content of a specific game/series"
+      />
+      
+      <NavOption 
+        url="/chronology"
+        icon="/icons/timeline-solid.svg"
+        title="Chronology"
+        subtitle="Follow all events in chronological order"
+      />
 
       <hr />
 
-      {generateMenuOption("/archive", "/icons/box-archive-solid.svg", "Archive")}
-      {generateMenuOption("/news", "/icons/newspaper-solid.svg", "News")}
-      {generateMenuOption("/gallery", "/icons/images-solid.svg", "Gallery")}
-      {generateMenuOption("/about-us", "/icons/circle-info-solid.svg", "About us")}
+      <NavOption
+        url="/archive"
+        icon="/icons/box-archive-solid.svg"
+        title="Archive"
+      />
+
+      <NavOption
+        url="/news"
+        icon="/icons/newspaper-solid.svg"
+        title="News"
+      />
+
+      <NavOption
+        url="/gallery"
+        icon="/icons/images-solid.svg"
+        title="Gallery"
+      />
+
+      <NavOption
+        url="/about-us"
+        icon="/icons/circle-info-solid.svg"
+        title="About us"
+      />
 
       <hr />
 

src/components/Panels/NavOption.tsx

@@ -0,0 +1,28 @@
+import { useRouter } from 'next/router'
+import styles from 'styles/Panels/NavOption.module.css'
+import Link from 'next/link'
+
+type NavOptionProps = {
+  url: string, 
+  icon?: string, 
+  title: string, 
+  subtitle?: string
+  border?: boolean
+}
+
+export default function NavOption(pageProps: NavOptionProps) {
+  const router = useRouter();
+  let classNames = [styles.menuOption]
+  if (router.asPath.startsWith(pageProps.url)) classNames.push(styles.active)
+  if (pageProps.icon) classNames.push(styles.icon)
+  if (pageProps.border === true) classNames.push(styles.border)
+  return (
+    <Link href={pageProps.url} passHref>
+        <div className={classNames.join(' ')}>
+          {pageProps.icon && <img src={pageProps.icon} alt="" />}
+          <h3>{pageProps.title}</h3>
+          {pageProps.subtitle && <p>{pageProps.subtitle}</p>}
+        </div>
+    </Link>
+  )
+}

src/components/Panels/ReturnButton.tsx

@@ -0,0 +1,17 @@
+import styles from 'styles/Panels/ReturnButton.module.css'
+import Link from 'next/link'
+
+type ReturnButtonProps = {
+  url: string,
+  title: string
+}
+
+export default function ReturnButton(pageProps: ReturnButtonProps) {
+  return (
+    <Link href={pageProps.url} passHref>
+        <button>
+            ❮&emsp;Return to {pageProps.title}
+        </button>
+    </Link>
+  )
+}

src/pages/chronology/index.tsx

@@ -1,13 +1,40 @@
 import type { NextPage } from 'next'
 import SubPanel from 'components/Panels/SubPanel'
+import styles from 'styles/Panels/SubPanel.module.css'
+import NavOption from 'components/Panels/NavOption'
 
 const Chronology: NextPage = () => {
 
   return (
     <>
       <SubPanel>
-        Hello
+        <h2>Chronology</h2>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vulputate facilisis blandit. Aliquam blandit neque sem, ac pulvinar leo ultricies sit amet.</p>
+        <hr />
+
+        <NavOption 
+          url="/chronology/timelines" 
+          title="Timelines" 
+          subtitle="Diagram of how the games connect to each other"
+          border={true}
+        />
+
+        <NavOption 
+          url="/chronology/overview" 
+          title="Chronology Overview" 
+          subtitle="List of all the events from the main timeline"
+          border={true}
+        />
+
+        <NavOption 
+          url="/chronology/walkthrough" 
+          title="Chronology Walkthrough" 
+          subtitle="Chronological exploration of the lore and stories"
+          border={true}
+        />
+
       </SubPanel>
+
     </>
   )
 }

src/pages/chronology/overview.tsx

@@ -1,25 +1,30 @@
 import type { NextPage } from 'next'
-import Head from 'next/head'
 import { useRouter } from 'next/router'
 import { GetStaticProps } from 'next'
 import ContentPanel from 'components/Panels/ContentPanel'
 import SubPanel from 'components/Panels/SubPanel'
-
+import ReturnButton from 'components/Panels/ReturnButton'
+import NavOption from 'components/Panels/NavOption'
 import { getChronologyItems } from 'queries/queries'
 
-export const getStaticProps: GetStaticProps = async (context) => {
-  return await getChronologyItems()
-}
-
-const ChronologyOverview: NextPage = ({ chronologyItems }) => {
+const ChronologyOverview: NextPage = ( props ) => {
   const router = useRouter()
 
   return (
     <>
-      <SubPanel>Hello</SubPanel>
+      <SubPanel>
+        <ReturnButton url="/chronology" title="Chronology"/>
+        <hr/>
+        <NavOption 
+          url="#test" 
+          title="Prior to the Cataclysm" 
+          subtitle="0&ensp;→&ensp;856"
+          border={true}
+        />
+      </SubPanel>
 
       <ContentPanel>
-        {chronologyItems.map((item: any) => (
+        {props.chronologyItems.map((item: any) => (
           <div key={item.id}>{item.year} -{' '}
           {
             item.translations.map((translation: any) => (
@@ -39,3 +44,11 @@ const ChronologyOverview: NextPage = ({ chronologyItems }) => {
   )
 }
 export default ChronologyOverview
+
+export const getStaticProps: GetStaticProps = async (context) => {
+  return {
+    props: {
+      chronologyItems: await getChronologyItems(),
+    },
+  }
+}

src/queries/queries.ts

@@ -1,7 +1,6 @@
 export const getChronologyItems = async () => {
     const res = await fetch(
-        process.env.NEXT_PUBLIC_GRAPHQL + `?query={
-        
+        process.env.GRAPHQL + '?access_token=' + process.env.ACCESS_TOKEN + `&query={
         chronology_items {
             id,
             year,
@@ -17,10 +16,5 @@ export const getChronologyItems = async () => {
 
     }`)
   
-  const data = (await res.json()).data.chronology_items
-  return {
-    props: {
-      chronologyItems: data,
-    },
-  }
+    return (await res.json()).data.chronology_items
 }

src/styles/Panels/NavOption.module.css

@@ -0,0 +1,46 @@
+.menuOption {
+    display: grid;
+    grid-template-areas: 'title' 'subtitle';
+    align-items: center;
+    border-radius: 1em;
+    grid-column-gap: 1em;
+    cursor: pointer;
+    padding: 0.6em 1.2em;
+    width: 100%;
+    transition: .1s background-color;
+    text-align: center;    
+}
+
+.menuOption.icon {
+    grid-template-areas: 'icon title' '. subtitle';
+    grid-template-columns: auto 1fr;
+    text-align: start;
+}
+
+.menuOption.border {
+    border: 1px solid var(--color-main-base);
+}
+
+
+.menuOption:hover, .menuOption.active {
+    background-color: var(--color-main-base);
+}
+
+.menuOption > * {
+    margin: 0;
+}
+
+.menuOption > img {
+    width: 1.2em;
+    height: auto;
+    grid-area: icon;
+}
+
+.menuOption > h3 {
+    grid-area: title;
+    font-size: 150%;
+}
+
+.menuOption > p {
+    grid-area: subtitle;
+}

src/styles/Panels/Panels.module.css

@@ -21,41 +21,4 @@
   border: none;
   border-top: 0.3rem dotted black;
   margin: 2rem;
-}
-
-.menuOption {
-  justify-self: start;
-  display: grid;
-  grid-template-areas: 'img title' '. subtitle';
-  grid-template-columns: auto 1fr;
-  align-items: center;
-  border-radius: 1em;
-  grid-column-gap: 1em;
-  cursor: pointer;
-  padding: 0.6em 1.2em;
-  width: 100%;
-  transition: .1s background-color;
-}
-  
-.menuOption:hover, .menuOption.active {
-  background-color: var(--color-main-base);
-}
-
-.menuOption > * {
-  margin: 0;
-}
-
-.menuOption > img {
-  width: 1.2em;
-  height: auto;
-  grid-area: img;
-}
-
-.menuOption > h3 {
-  grid-area: title;
-  font-size: 150%;
-}
-
-.menuOption > p {
-  grid-area: subtitle;
 }