work and created develop branch

components/Footer/FooterLinks/index copy.js

@@ -0,0 +1,74 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types' //ES6
+import styles from './styles.module.css'
+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 Link from 'next/link'
+import { makeStyles } from '@mui/material/styles';
+
+const useStyles = makeStyles((theme) => ({
+    root: {
+      width: '75%',
+      maxWidth: 260,
+     /* backgroundColor: theme.palette.background.paper, */
+     float : 'right',
+     marginRight:'2%',
+     fontSize : '.80em'
+
+
+    },
+  }));
+
+export default function FooterLinks()  {
+    
+        const classes = useStyles();
+        return (
+            <div className={classes.root}>
+                        <TypoGraphy variant="subtitle1" color="inherit"            >
+              <List component="nav" >
+               
+                  <ListItemText inset >
+                    <TypoGraphy color="inherit" variant="subtitle2">
+                      <Link href="/info/faq"><a className={styles.navLinks}>FAQ</a></Link>
+                    </TypoGraphy>
+                  </ListItemText>
+
+                    <ListItemText inset >
+                      <TypoGraphy color="inherit" variant="subtitle2">
+                        <Link href="/info/tos"><a className={styles.navLinks}>Terms Of Service</a></Link>
+                      </TypoGraphy>
+                    </ListItemText>
+
+                    <ListItemText inset>
+                      <TypoGraphy color="inherit" variant="subtitle2">
+                        <Link href="/info/contactus"><a className={styles.navLinks}>Contact Us</a></Link>
+                      </TypoGraphy>
+                    </ListItemText>
+
+                    <ListItemText inset>
+                      <TypoGraphy color="inherit" variant="subtitle2">
+                        <Link href="/info/privacypolicy"><a className={styles.navLinks}>Privacy Policy</a></Link>
+                      </TypoGraphy>
+                    </ListItemText>
+
+                    <ListItemText inset>
+                      <TypoGraphy color="inherit" variant="subtitle2">
+                        <Link href="/info/pip"><a className={styles.navLinks}>Personal Information Policy</a></Link>
+                      </TypoGraphy>
+                    </ListItemText>
+
+                  <ListItemText inset>
+                      <TypoGraphy color="inherit" variant="subtitle2">
+                        <Link href="/info/disclosure"><a className={styles.navLinks}>Disclosure</a></Link>
+                      </TypoGraphy>
+                  </ListItemText>
+         
+                  
+                </List>
+              </TypoGraphy>
+            </div>
+        )
+    }
+

components/Footer/FooterLinks/index.js

@@ -0,0 +1,68 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types' //ES6
+import styles from './styles.module.css'
+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 Link from 'next/link'
+import { withStyles } from '@mui/material/styles';
+import styled from '@emotion/styled'
+import FooterLink from '@/fragments/FooterLink';
+
+// SS - IDK what this is. It feels hacky..
+// DS - Because it is hacky, its stupid javascript magic
+// const useStyles = theme => ({ //const makes a constant, => defines a function, 
+// so it looks like useStyles will end up beign a function that is actually the theme function
+// the useStyles function will have properties in root, so useStyles.root
+//  root: {
+//    width: '75%',
+//    maxWidth: 260,
+//    /* backgroundColor: theme.palette.background.paper, */
+//    float: 'right',
+//    marginRight: '2%',
+//    fontSize: '.80em'
+//  },
+// }); 
+// }
+
+class FooterLinks extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+    }
+  }
+
+  render() {
+    const { classes } = this.props;
+    return (
+      <FooterLinksStyled>
+        <div className="footer-links">
+           <List component="nav" >
+              <React.Fragment>
+                <FooterLink href="/info/faq" title="FAQ" />
+                <FooterLink href="/info/tos" title="Terms Of Service" />
+                <FooterLink href="/info/contactus" title="Contact Us" />
+                <FooterLink href="/info/privacypolicy" title="Privacy Policy" />
+                <FooterLink href="/info/pip" title="Personal Information Policy" />
+                <FooterLink href="/info/disclosure" title="Disclosure" />
+                <FooterLink href="/info/about" title="About Us" />
+              </React.Fragment>
+            </List>
+        </div>
+      </FooterLinksStyled>
+    )
+  }
+}
+
+const FooterLinksStyled = styled.div`
+    .footer-links nav {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-around;
+      width: 100%;
+    }
+`
+// export default withStyles(useStyles)(FooterLinks);
+
+export default FooterLinks;

components/Footer/FooterLinks/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "footerlinks",
+  "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/"
+    }
+  ]
+}

components/Footer/FooterLinks/styles.module.css

@@ -0,0 +1,7 @@
+.navLinks {
+    color:#000;
+}
+.navLinks:hover {
+    font-weight: bold;
+    text-decoration : none;
+}