Add Header and Title components

rnatulsa · Feb 12, 2021 · c874e25 · c874e25
1 parent ea9632d
commit c874e25
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 18 deletions.
diff --git a/src/components/header.js b/src/components/header.js
@@ -0,0 +1,23 @@
+import logo from '@/images/logo.png'
+
+export default function Header({ children }) {
+  return (
+    <>
+      <header className="; flex">
+        <img className="; block h-32 w-auto" src={logo} alt="Logo" />
+
+        <div className="flex space-x-4">
+          {/* <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" --> */}
+          <a href="#">Home</a>
+          <a href="#">About Us</a>
+          <a href="#">News</a>
+          <a href="#">Dues</a>
+          <a href="#">Events</a>
+          <a href="#">Contact</a>
+          <a href="#">Gallery</a>
+          <a href="#">History</a>
+        </div>
+      </header>
+    </>
+  )
+}
diff --git a/src/components/layout.js b/src/components/layout.js
@@ -1,12 +1,11 @@
-import logo from '@/images/logo.png'
+import Header from '@/components/header'
 
 export default function Layout({ children }) {
   return (
-    <>
-      <header>
-        <img src={logo} alt="Logo" />
-      </header>
+    <div className="; lg:container mx-auto">
+      <Header />
+
       {children}
-    </>
+    </div>
   )
 }
diff --git a/src/components/title.js b/src/components/title.js
@@ -0,0 +1,9 @@
+import Head from 'next/head'
+
+export default function Title({ children }) {
+  return (
+    <Head>
+      <title>{children}{children && ' | '}Renaissance Neighborhood Association, Tulsa, OK</title>
+    </Head>
+  )
+}
diff --git a/src/pages/_app.js b/src/pages/_app.js
@@ -1,8 +1,22 @@
 import '@/styles/globals.css'
-// import 'tailwindcss/tailwind.css'
+import Title from '@/components/title'
+import Head from 'next/head'
+import Layout from '@/components/layout'
 
 function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
+  return (
+    <>
+      <Title />
+
+      <Head>
+        <link rel="icon" href={`${process.env.BASE_PATH || ''}/favicon.ico`} />
+      </Head>
+
+      <Layout>
+        <Component {...pageProps} />
+      </Layout>
+    </>
+  )
 }
 
 export default MyApp
diff --git a/src/pages/index.js b/src/pages/index.js
@@ -1,15 +1,11 @@
-import Head from 'next/head'
 import styles from '@/styles/Home.module.css'
-import Layout from '@/components/layout'
+import Title from '@/components/title'
 
 export default function Home() {
-  return (
-    <Layout>
-      <Head>
-        <title>Create Next App</title>
-        <link rel="icon" href={`${process.env.BASE_PATH || ''}/favicon.ico`} />
-      </Head>
+  return <>
+    <Title>Home</Title>
 
+    <div>
       <main className={styles.main}>
         <h1 className={styles.title}>
           Welcome to <a href="https://nextjs.org">Next.js!</a>
@@ -61,6 +57,6 @@ export default function Home() {
           <img src="/vercel.svg" alt="Vercel Logo" className={styles.logo} />
         </a>
       </footer>
-    </Layout>
-  )
+    </div>
+  </>
 }