mirror of
https://gitea.gofwd.group/dstrawsb/ballistic-builder.git
synced 2025-12-06 02:36:44 -05:00
work and created develop branch
This commit is contained in:
74
components/Footer/FooterLinks/index copy.js
Normal file
74
components/Footer/FooterLinks/index copy.js
Normal file
@@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
68
components/Footer/FooterLinks/index.js
Normal file
68
components/Footer/FooterLinks/index.js
Normal file
@@ -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;
|
||||
23
components/Footer/FooterLinks/package.json
Normal file
23
components/Footer/FooterLinks/package.json
Normal file
@@ -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/"
|
||||
}
|
||||
]
|
||||
}
|
||||
7
components/Footer/FooterLinks/styles.module.css
Normal file
7
components/Footer/FooterLinks/styles.module.css
Normal file
@@ -0,0 +1,7 @@
|
||||
.navLinks {
|
||||
color:#000;
|
||||
}
|
||||
.navLinks:hover {
|
||||
font-weight: bold;
|
||||
text-decoration : none;
|
||||
}
|
||||
43
components/Footer/index.tsx
Normal file
43
components/Footer/index.tsx
Normal file
@@ -0,0 +1,43 @@
|
||||
import React, { Component } from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import styles from './styles.module.scss';
|
||||
import Copyright from "@/components/Info/Copyright";
|
||||
import FooterLinks from "./FooterLinks";
|
||||
import Link from "next/link";
|
||||
import { infoLinks } from "@/lib/linkList/infoLinks";
|
||||
import { sectionLinks } from "@/lib/linkList/sectionLinks";
|
||||
import Armory from '@/fragments/Armory';
|
||||
import GroundZero from "@/fragments/GroundZero";
|
||||
import Information from "@/fragments/Information";
|
||||
export const Footer = () => {
|
||||
|
||||
return (
|
||||
// <div className={styles.Footer}>
|
||||
// <FooterLinks></FooterLinks>
|
||||
// <Copyright></Copyright>
|
||||
// </div>
|
||||
<>
|
||||
<footer className={styles.footer}>
|
||||
<nav className={styles.linksContainer}>
|
||||
<div className={styles.brand}>
|
||||
<div className={styles.logo}>
|
||||
<span>Logo</span>
|
||||
</div>
|
||||
<p>Find Parts.</p>
|
||||
<p>Build Guns.</p>
|
||||
<p>Freedom On.</p>
|
||||
</div>
|
||||
<Armory titleText="Armory"/>
|
||||
<GroundZero titleText="Ground Zero"/>
|
||||
<Information titleText="Information"/>
|
||||
</nav>
|
||||
</footer>
|
||||
<Copyright></Copyright>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Footer.propTypes = {};
|
||||
|
||||
export default Footer;
|
||||
23
components/Footer/package.json
Normal file
23
components/Footer/package.json
Normal file
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"name": "footer",
|
||||
"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/"
|
||||
}
|
||||
]
|
||||
}
|
||||
59
components/Footer/styles.module.scss
Normal file
59
components/Footer/styles.module.scss
Normal file
@@ -0,0 +1,59 @@
|
||||
@import '../../scss/variables.scss';
|
||||
|
||||
.footer {
|
||||
background: #4c5c3f;
|
||||
min-height: 300px;
|
||||
height: 100%;
|
||||
padding: 1rem 0;
|
||||
border-top: 2px solid #000;
|
||||
|
||||
.brand {
|
||||
font-weight: bolder;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
font-size: 1.25em;
|
||||
color:#FFF;
|
||||
|
||||
.logo span {
|
||||
display: inline-block;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
background: #FFF;
|
||||
color:#4c5c3f;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.linksContainer {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: flex-start;
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
color:#FFF;
|
||||
|
||||
a {
|
||||
color: #fff;
|
||||
transition: all 500ms ease;
|
||||
|
||||
&:hover {
|
||||
color: #ADA17B;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h4 {
|
||||
color: #FFF;
|
||||
border-bottom: 2px solid #fff;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user