restructuring folders

app/components/Header/index.tsx

@@ -0,0 +1,108 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types'; //ES6
+import styles from './styles.module.css';
+import Link from 'next/link';
+import AppBar from '@mui/material/AppBar';
+import Toolbar from '@mui/material/Toolbar';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemText from '@mui/material//ListItemText';
+// import TypoGraphy from '@mui/material/Typography';
+import Button from '@mui/material//Button';
+import { infoLinks } from '@/app/lib/linkList/infoLinks';
+import  sectionLinks  from '@/app/lib/linkList/sectionLinks';
+
+export default class Header extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+    }
+  }
+
+  render() {
+    return (
+         <div>
+          <div className="topheader">
+            <Link href="/"><a className="logo">Gun Builder</a>
+            </Link>
+          </div>
+
+          <AppBar position="static">
+          <Toolbar>
+              <List component="nav">
+                <ListItem component="div" className="nav-item">
+                  <ListItemText inset>
+                      <Link href={sectionLinks.UPPERS.URL}><a className={styles.navLinks}>{sectionLinks.UPPERS.TEXT}</a></Link>
+                  </ListItemText>
+
+                    <ListItemText inset>
+                        <Link href={sectionLinks.PARTSLIST.URL}><a className={styles.navLinks}>{sectionLinks.PARTSLIST.TEXT}</a></Link>
+                    </ListItemText>
+
+                    <ListItemText inset>
+                        <Link href={sectionLinks.BUILDS.URL}><a className={styles.navLinks}>{sectionLinks.BUILDS.TEXT}</a></Link>
+                    </ListItemText>
+
+                    <ListItemText inset>
+                        <Link href={sectionLinks.BLOG.URL}><a className={styles.navLinks}>{sectionLinks.BLOG.TEXT}</a></Link>
+                    </ListItemText>
+
+                 {/*    <ListItemText inset>
+                        <Link href="/admin"><a className={styles.navLinks}>Admin</a></Link>
+                    </ListItemText> */}
+                  </ListItem>
+                  
+                </List>
+            </Toolbar>
+          </AppBar>
+
+        <style jsx>{`
+                  header {
+                    background:#101010;
+                    color:#fff;
+                  }
+                   .topheader {
+                    background:#111;
+                    height: 4em;
+                    color: #000;
+                    display: flex;
+                    justify-content: center;
+                    flex-direction: column;
+                  }
+          
+                   .topheader a {
+                      color:#fff;
+                      padding-left: 15px;
+                      text-transform: uppercase;
+                      font-weight: bold;
+                      letter-spacing: 2px;
+                  }
+                   .nav {
+                    display: flex;
+                    background: #4c5d34;
+                  }
+                   ul {
+                    list-style: none;
+                    padding: 0;
+                    display: flex;
+                    margin: 0;
+                    height: 100%;
+                  }
+                   ul li {
+                    margin-right: 10px;
+                    padding:1em 1.5em;
+                    border-right:2px solid rgba(0,0,0,.3);
+                    text-transform: uppercase;
+                    font-weight:bold;
+                    letter-spacing:2px;
+                  }
+                `}</style>
+      </div>
+    )
+  }
+}
+
+
+Header.propTypes = {
+
+};

app/components/Header/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "header",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./index",
+  "author": {
+    "name": "Don Strawsburg",
+    "email": "don@goforward.group",
+    "url": "https://goforward.group/"
+  },
+  "contributors": [
+    {
+      "name": "Don Strawsburg",
+      "email": "don@goforward.group",
+      "url": "https://goforward.group/"
+    },
+    {
+      "name": "Sean Strawsburg",
+      "email": "sean@goforward.group",
+      "url": "https://goforward.group/"
+    }
+  ]
+}

app/components/Header/styles.module.css

@@ -0,0 +1,13 @@
+.navLinks {
+    color:white;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    font-weight: bold;
+    transition: all 500ms ease;
+}
+.navLinks:hover {
+    text-decoration : none;
+}
+.nav-item:hover {
+   background-color: pink;
+}