footer.js (1816B)
1 import React from 'react'; 2 import PropTypes from 'prop-types'; 3 import Icon from './partials/Icon'; 4 import { 5 EmailSVG, 6 GitHubSVG, 7 InstagramSVG, 8 TwitterSVG, 9 } from './partials/SVGIcon'; 10 11 function Footer({ author, email, username }) { 12 const currentYear = new Date().getFullYear(); 13 return ( 14 <footer id="footer" className="footer-container"> 15 <div className="footer"> 16 <div className="social-menu-container"> 17 <nav aria-label="Social Menu"> 18 <ul className="social-menu"> 19 <li> 20 <Icon 21 link={`mailto:${email}`} 22 text="Contact via Email" 23 SVG={EmailSVG} 24 /> 25 </li> 26 <li> 27 <Icon 28 link={`https://twitter.com/${username}`} 29 text="Open Twitter account in new tab" 30 SVG={TwitterSVG} 31 /> 32 </li> 33 <li> 34 <Icon 35 link={`https://instagram.com/${username}`} 36 text="Open Instagram account in new tab" 37 SVG={InstagramSVG} 38 /> 39 </li> 40 <li> 41 <Icon 42 link={`https://github.com/${username}`} 43 text="Open GitHub account in new tab" 44 SVG={GitHubSVG} 45 /> 46 </li> 47 </ul> 48 </nav> 49 </div> 50 <div className="copyright"> 51 <p> 52 © {currentYear} {author} 53 </p> 54 </div> 55 </div> 56 </footer> 57 ); 58 } 59 60 Footer.propTypes = { 61 author: PropTypes.string, 62 email: PropTypes.string, 63 username: PropTypes.string, 64 }; 65 66 Footer.defaultProps = { 67 author: '', 68 email: '', 69 username: '', 70 }; 71 72 export default Footer;