ballistic-builder/app/components/Footer/FooterLinks/index.js

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 '@/app/Fragments/FooterLink';


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;