feat: Dashboard page, Navbar, and Fonts (freeCodeCamp#20)

* Apply fixes from CodeFactor (freeCodeCamp#19) Co-authored-by: codefactor-io <[email protected]> * add freecodecamp logo, spot to put <li> elements, and add google fonts Co-authored-by: Mrugesh Mohapatra <[email protected]> Co-authored-by: codefactor-io <[email protected]>
raul-vale · Mar 25, 2022 · 824f48e · 824f48e
1 parent 70fdb79
commit 824f48e
Show file tree

Hide file tree

Showing 7 changed files with 92 additions and 2 deletions.
diff --git a/components/layout.js b/components/layout.js
@@ -0,0 +1,3 @@
+export default function Layout({ children }) {
+  return <div>{children}</div>;
+}
diff --git a/components/navbar.js b/components/navbar.js
@@ -0,0 +1,19 @@
+import navbarStyles from './navbar.module.css';
+import Image from 'next/image';
+
+export default function Navbar({ children }) {
+  return (
+    <div className={navbarStyles.navbar}>
+      <Image
+        className={navbarStyles.navimage}
+        priority
+        layout='fixed'
+        src='/images/fcc_primary_large.png'
+        alt='FreeCodecamp Logo'
+        width={330}
+        height={40}
+      ></Image>
+      <ul className={navbarStyles.navLinks}>{children}</ul>
+    </div>
+  );
+}
diff --git a/components/navbar.module.css b/components/navbar.module.css
@@ -0,0 +1,18 @@
+.navbar {
+  display: flex;
+  background-color: #0a0a23;
+  color: #ffffff;
+  padding: 15px;
+  align-items: center;
+  justify-content: space-between;
+  font-family: 'Roboto Mono', monospace;
+}
+
+.navLinks {
+  display: flex;
+  list-style-type: none;
+}
+
+.navLinks li {
+  padding-left: 10px;
+}
diff --git a/pages/_document.js b/pages/_document.js
@@ -0,0 +1,24 @@
+import Document, { Html, Head, Main, NextScript } from 'next/document';
+
+class MyDocument extends Document {
+  render() {
+    return (
+      <Html>
+        <Head>
+          <link rel='preconnect' href='https://fonts.googleapis.com' />
+          <link rel='preconnect' href='https://fonts.gstatic.com' crossOrigin />
+          <link
+            href='https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap'
+            rel='stylesheet'
+          />
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
+}
+
+export default MyDocument;
diff --git a/pages/dashboard.js b/pages/dashboard.js
@@ -0,0 +1,27 @@
+import Head from 'next/head';
+import Layout from '../components/layout';
+import Link from 'next/link';
+import Navbar from '../components/navbar';
+
+export default function Home() {
+  return (
+    <Layout>
+      <Head>
+        <title>Create Next App</title>
+        <meta name='description' content='Generated by create next app' />
+        <link rel='icon' href='/favicon.ico' />
+        <Navbar>
+          <li>
+            <Link href={'#'}>Back</Link>
+          </li>
+          <li>
+            <Link href={'#'}>Menu</Link>
+          </li>
+          <li>
+            <Link href={'#'}>Extra</Link>
+          </li>
+        </Navbar>
+      </Head>
+    </Layout>
+  );
+}
diff --git a/public/images/fcc_primary_large.png b/public/images/fcc_primary_large.png
diff --git a/styles/globals.css b/styles/globals.css
@@ -2,8 +2,7 @@ html,
 body {
   padding: 0;
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  font-family: 'Roboto Mono', monospace;
 }
 
 a {