Adventures: introduce Page component with proper navbar

packages/common/src/components/Navbar.jsx

@@ -44,7 +44,7 @@ export default function Navbar (props) {
               <i className={`${textColor} fas fa-bars`} />
             </button>}
         </div>
-        {menuLinks &&
+        {(menuLinks || additionalMenuItems) &&
           <div
             className={
               `lg:flex flex-grow lg:flex-grow-0 lg:ml-auto ${backgroundColor} ${navbarOpen ? ' block rounded' : ' hidden'}`

packages/common/src/components/NavbarLink.jsx

@@ -7,22 +7,23 @@
  */
 
 import React from 'react'
+import { Link } from 'react-router-dom'
 
 export default function NavbarLink (props) {
   const { textColor } = props
   const { url, iconName, title } = props.link
 
   return (
-    <a
+    <Link
       className={`${textColor} px-3 py-4 lg:px-6 lg:py-2 flex items-center text-sm lowercase font-bold`}
-      href={url}
+      to={url}
     >
       {iconName &&
         <>
           <i className={`${textColor} ${iconName} text-lg leading-lg mr-2`} />
           {' '}
         </>}
       {title}
-    </a>
+    </Link>
   )
 }

packages/projects/src/App.config.json

@@ -1,27 +1,17 @@
 {
   "appTitle": "Kernel Adventures",
+  "logoUrl": "/icon-192x192.png",
+  "homeUrl": "/browse",
   "minRole": 1000,
   "navbar": {
     "links": [
       {
-        "url": "https://kernel.community/en/learn/",
-        "iconName": "far fa-file-alt",
-        "title": "Learn"
+        "url": "/browse",
+        "title": "Browse"
       },
       {
-        "url": "https://twitter.com/kernel0x",
-        "iconName": "fab fa-twitter",
-        "title": "Tweet"
-      },
-      {
-        "url": "https://www.youtube.com/channel/UC2kUaSgR0L-uzGkNsOxSxzw",
-        "iconName": "fab fa-youtube",
-        "title": "Watch"
-      },
-      {
-        "url": "https://github.com/kernel-community/",
-        "iconName": "fab fa-github",
-        "title": "Contribute"
+        "url": "/create",
+        "title": "Create"
       }
     ]
   }

packages/projects/src/App.js

@@ -10,14 +10,14 @@ import React, { Suspense, lazy } from 'react'
 import { BrowserRouter, Route, Routes, Navigate } from 'react-router-dom'
 import { ServicesProvider } from '@kernel/common'
 
-import NotFound from 'views/NotFound.js'
+import NotFound from 'views/NotFound'
 import 'App.css'
 
-const Login = lazy(() => import('views/Login.js'))
-const Create = lazy(() => import('views/Create.js'))
-const Edit = lazy(() => import('views/Edit.js'))
-const Browse = lazy(() => import('views/Browse.js'))
-const View = lazy(() => import('views/View.js'))
+const Login = lazy(() => import('views/Login'))
+const Create = lazy(() => import('views/Create'))
+const Edit = lazy(() => import('views/Edit'))
+const Browse = lazy(() => import('views/Browse'))
+const View = lazy(() => import('views/View'))
 
 const App = () => {
   return (

packages/projects/src/components/Page.jsx

@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) Kernel
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { Link } from 'react-router-dom'
+
+import { Footer, Navbar } from '@kernel/common'
+
+import AppConfig from 'App.config'
+
+const editMenuItem = ({ projectHandle }) => {
+  return (
+    <Link
+      key='edit'
+      className='text-kernel-white px-3 py-4 lg:px-6 lg:py-2 flex items-center text-sm lowercase font-bold'
+      to={`/edit/${projectHandle}`}
+    >
+      Edit
+    </Link>
+  )
+}
+
+const Page = ({ projectHandle, children }) => {
+  const additionalMenuItems = projectHandle ? [editMenuItem({ projectHandle })] : []
+
+  return (
+    <div className='flex flex-col h-screen justify-between'>
+      <Navbar
+        title={AppConfig.appTitle}
+        logoUrl={AppConfig.logoUrl}
+        homeUrl={AppConfig.homeUrl}
+        menuLinks={AppConfig.navbar?.links}
+        additionalMenuItems={additionalMenuItems}
+        backgroundColor='bg-kernel-dark' textColor='text-kernel-white'
+      />
+      <div className='mb-auto mt-24 mx-24'>
+        {children}
+      </div>
+      <Footer backgroundColor='bg-kernel-dark' textColor='text-kernel-white'>
+        built at <a href='https://kernel.community/' className='text-kernel-green-light'>KERNEL</a>
+      </Footer>
+    </div>
+  )
+}
+
+export default Page

packages/projects/src/views/Browse.js → packages/projects/src/views/Browse.jsx

@@ -11,7 +11,8 @@ import { useNavigate, Link } from 'react-router-dom'
 import { useServices } from '@kernel/common'
 
 import AppConfig from 'App.config'
-import NavBar from 'components/NavBar'
+
+import Page from 'components/Page'
 
 const INITIAL_STATE = { items: {} }
 
@@ -44,7 +45,7 @@ const humanize = (ms, dp = 0) => {
   return `${scaledTime.toFixed(dp)} ${timeUnits[timeScalarIndex]}`
 }
 
-const Page = () => {
+const Browse = () => {
   const [state, dispatch] = useReducer(reducer, INITIAL_STATE)
   const navigate = useNavigate()
 
@@ -68,31 +69,24 @@ const Page = () => {
   }, [services])
 
   return (
-    <div className='md:container md:mx-auto'>
-      <NavBar />
-      <div className='flex md:flex-row flex-wrap py-4 justify-center justify-between'>
-        <div className='md:basis-1/2 px-8'>
-          <div className='grid grid-cols-1 gap-6'>
-            <div className='block'>
-              <ul>
-                {state && state.items && Object.keys(state.items).map((e) => {
-                  const meta = state.items[e]
-                  const project = state.items[e].data
-                  const updated = Date.now() - meta.updated
-                  return (
-                    <li key={e} className='text-gray-700'>
-                      <Link to={`/view/${project.url}`}>{project.title}</Link>
-                      <small> {humanize(updated)} ago</small>
-                    </li>
-                  )
-                })}
-              </ul>
-            </div>
-          </div>
-        </div>
+    <Page>
+      <div>
+        <ul>
+          {state && state.items && Object.keys(state.items).map((e) => {
+            const meta = state.items[e]
+            const project = state.items[e].data
+            const updated = Date.now() - meta.updated
+            return (
+              <li key={e} className='text-gray-700'>
+                <Link to={`/view/${project.url}`}>{project.title}</Link>
+                <small> {humanize(updated)} ago</small>
+              </li>
+            )
+          })}
+        </ul>
       </div>
-    </div>
+    </Page>
   )
 }
 
-export default Page
+export default Browse

packages/projects/src/views/Create.js → packages/projects/src/views/Create.jsx

@@ -20,7 +20,8 @@ import { MDXProvider, useMDXComponents } from '@mdx-js/react'
 import { CodePen, Gist, Figma } from 'mdx-embed'
 
 import AppConfig from 'App.config'
-import NavBar from 'components/NavBar'
+
+import Page from 'components/Page'
 
 const INITIAL_STATE = { url: '', title: '', markdown: '' }
 
@@ -82,7 +83,7 @@ const create = async (state, dispatch, e) => {
   console.log(created)
 }
 
-const Page = () => {
+const Create = () => {
   const [state, dispatch] = useReducer(reducer, INITIAL_STATE)
   const navigate = useNavigate()
 
@@ -132,10 +133,9 @@ const Page = () => {
   }, [markdown])
 
   return (
-    <div className='md:container md:mx-auto'>
-      <NavBar />
-      <div className='flex md:flex-row flex-wrap py-4 justify-center justify-between'>
-        <div className='md:basis-1/2 px-8'>
+    <Page>
+      <div className='grid grid-cols-2 mb-24'>
+        <div className='px-8'>
           <form className='grid grid-cols-1 gap-6'>
             <label className='block'>
               <span className='text-gray-700'>Title</span>
@@ -181,14 +181,14 @@ const Page = () => {
               </label>}
           </form>
         </div>
-        <div className='md:basis-1/2 grow px-8 rounded-md border-gray-800 shadow-lg'>
+        <div className='px-8 rounded-md border-gray-800 shadow-lg'>
           <MDXProvider components={components}>
             <Content />
           </MDXProvider>
         </div>
       </div>
-    </div>
+    </Page>
   )
 }
 
-export default Page
+export default Create

packages/projects/src/views/Edit.js → packages/projects/src/views/Edit.jsx

@@ -20,7 +20,8 @@ import { MDXProvider, useMDXComponents } from '@mdx-js/react'
 import { CodePen, Gist, Figma } from 'mdx-embed'
 
 import AppConfig from 'App.config'
-import NavBar from 'components/NavBar'
+
+import Page from 'components/Page'
 
 const INITIAL_STATE = { url: '', title: '', markdown: '' }
 
@@ -82,7 +83,7 @@ const update = async (state, dispatch, e) => {
   console.log(updated)
 }
 
-const Page = () => {
+const Edit = () => {
   const [state, dispatch] = useReducer(reducer, INITIAL_STATE)
   const navigate = useNavigate()
   const { project } = useParams()
@@ -138,10 +139,9 @@ const Page = () => {
   }, [markdown])
 
   return (
-    <div className='md:container md:mx-auto'>
-      <NavBar />
-      <div className='flex md:flex-row flex-wrap py-4 justify-center justify-between'>
-        <div className='md:basis-1/2 px-8'>
+    <Page>
+      <div className='grid grid-cols-2 mb-24'>
+        <div className='px-8'>
           <form className='grid grid-cols-1 gap-6'>
             <label className='block'>
               <span className='text-gray-700'>Title</span>
@@ -193,8 +193,8 @@ const Page = () => {
           </MDXProvider>
         </div>
       </div>
-    </div>
+    </Page>
   )
 }
 
-export default Page
+export default Edit

packages/projects/src/views/Login.js → packages/projects/src/views/Login.jsx

@@ -6,29 +6,15 @@
  *
  */
 
-import { useNavigate, Link } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
 import { useServices, Navbar, Footer } from '@kernel/common'
 import AppConfig from 'App.config'
 
 import bgImage from 'assets/images/admin_bg.png'
 
-const additionalNavItems = [
-  (
-    <button
-      key='btn-nav'
-      className={`bg-kernel-green-mid text-kernel-dark text-xs font-bold uppercase
-      px-4 py-2 rounded outline-none focus:outline-none ml-3 mt-3 mb-4`}
-      type='button'
-    >
-      <i className='fas fa-user-plus' /> <Link to='/register'>Register</Link>
-    </button>
-  )
-]
-
 const Login = () => {
   const navigate = useNavigate()
   const { walletLogin } = useServices()
-  const navbarConfig = AppConfig.navbar
 
   const handleLogin = async () => {
     const user = await walletLogin()
@@ -41,8 +27,8 @@ const Login = () => {
   return (
     <div>
       <Navbar
-        title={AppConfig.appTitle} menuLinks={navbarConfig.links}
-        additionalMenuItems={additionalNavItems}
+        title={AppConfig.appTitle}
+        logoUrl={AppConfig.logoUrl}
         backgroundColor='bg-kernel-dark' textColor='text-kernel-white'
       />
       <main>

packages/projects/src/views/View.js → packages/projects/src/views/View.jsx

@@ -20,7 +20,8 @@ import { MDXProvider, useMDXComponents } from '@mdx-js/react'
 import { CodePen, Gist, Figma } from 'mdx-embed'
 
 import AppConfig from 'App.config'
-import NavBar from 'components/NavBar'
+
+import Page from 'components/Page'
 
 /* eslint-disable */
 const components = {
@@ -36,7 +37,7 @@ const components = {
 }
 /* eslint-enable */
 
-const Page = () => {
+const View = () => {
   const navigate = useNavigate()
   const { project } = useParams()
 
@@ -85,17 +86,14 @@ const Page = () => {
   }, [markdown])
 
   return (
-    <div className='md:container md:mx-auto'>
-      <NavBar project={project} />
-      <div className='flex md:flex-row flex-wrap py-4 justify-center justify-between'>
-        <div className='md:basis-1/2 grow px-8 rounded-md border-gray-800 shadow-lg min-h-screen'>
-          <MDXProvider components={components}>
-            {markdownError || <Content />}
-          </MDXProvider>
-        </div>
+    <Page projectHandle={project}>
+      <div className='mb-24'>
+        <MDXProvider components={components}>
+          {markdownError || <Content />}
+        </MDXProvider>
       </div>
-    </div>
+    </Page>
   )
 }
 
-export default Page
+export default View