gaspersic/developer-roadmap
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add footer for guide pages

Browse Source
This commit is contained in:
Kamran Ahmed
2019-11-03 11:47:31 +04:00
parent 62f8e0961f
commit 4fa6747d6e
5 changed files with 117 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
components/guide-footer/index.js
View File

@@ -1,44 +1,51 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faGithub, faFacebookSquare, faTwitterSquare, faTwitter, faHackerNewsSquare, faRedditSquare } from '@fortawesome/free-brands-svg-icons'
import { AuthorBio, AuthorImg, AuthorInfoWrap, AuthorMeta, ContributeIcon, FooterWrap, ShareIcons, ShareWrap, WrittenBy } from './style';
import { faFacebookSquare, faGithub, faHackerNewsSquare, faRedditSquare, faTwitter, faTwitterSquare } from '@fortawesome/free-brands-svg-icons'
import { AuthorBio, AuthorImg, AuthorInfoWrap, AuthorMeta, ContributeIcon, FooterBg, FooterContainer, FooterWrap, ShareIcons, ShareWrap } from './style';
const GuideFooter = (props) => (
<FooterWrap>
<ShareWrap>
<ContributeIcon>
<a href="#">
<span>Improve this Guide </span>
<FontAwesomeIcon icon={ faGithub } />
</a>
</ContributeIcon>
<ShareIcons>
<span>Help spread the word</span>
<a href="#"><FontAwesomeIcon icon={ faTwitterSquare } /></a>
<a href="#"><FontAwesomeIcon icon={ faFacebookSquare } /></a>
<a href="#"><FontAwesomeIcon icon={ faRedditSquare } /></a>
<a href="#"><FontAwesomeIcon icon={ faHackerNewsSquare } /></a>
</ShareIcons>
</ShareWrap>
<AuthorInfoWrap className="border-top">
<AuthorImg src="/static/authors/kamranahmedse.jpeg" alt="" />
<AuthorMeta>
<WrittenBy>Written By</WrittenBy>
<h4><a href="#">Kamran Ahmed</a></h4>
<AuthorBio>Lead engineer at Tajawal. Created roadmap.sh. Lover of web and opensource</AuthorBio>
<p className="social-links">
<a href="#">
<FontAwesomeIcon icon={ faTwitter } />
Follow on Twitter
</a>
<a href="#">
<FontAwesomeIcon icon={ faGithub } />
Follow on GitHub
</a>
</p>
</AuthorMeta>
</AuthorInfoWrap>
<FooterBg className="border-top">
<FooterContainer>
<ShareWrap>
<ContributeIcon>
<a href="#">
<span className="d-none d-sm-none d-md-inline d-lg-inline d-xl-inline">Improve this Guide </span>
<span className="d-inline d-sm-inline d-md-none d-lg-none d-xl-none">Contribute </span>
<FontAwesomeIcon icon={faGithub}/>
</a>
</ContributeIcon>
<ContributeIcon hasMargins>
<a href="#">
<span className="d-none d-sm-none d-md-inline d-lg-inline d-xl-inline">Follow the author </span>
<span className="d-inline d-sm-inline d-md-none d-lg-none d-xl-none">Author </span>
<FontAwesomeIcon icon={faTwitter}/>
</a>
</ContributeIcon>
<ShareIcons>
<span className="d-none d-sm-none d-md-none d-lg-inline d-xl-inline">Help spread the word</span>
<span className="d-inline d-sm-inline d-md-inline d-lg-none d-xl-none">Share</span>
<a href="#"><FontAwesomeIcon icon={faTwitterSquare}/></a>
<a href="#"><FontAwesomeIcon icon={faFacebookSquare}/></a>
<a href="#"><FontAwesomeIcon icon={faRedditSquare}/></a>
<a href="#"><FontAwesomeIcon icon={faHackerNewsSquare}/></a>
</ShareIcons>
</ShareWrap>
</FooterContainer>
</FooterBg>
<FooterBg className="border-top">
<FooterContainer>
<AuthorInfoWrap>
<AuthorImg src="/static/authors/kamranahmedse.jpeg" alt=""/>
<AuthorMeta>
<h4><a href="#">Kamran Ahmed</a></h4>
<AuthorBio>Lead engineer at Tajawal. Lover of all things web and opensource. Created roadmap.sh to help the confused ones.</AuthorBio>
</AuthorMeta>
</AuthorInfoWrap>
</FooterContainer>
</FooterBg>
</FooterWrap>
);
export default GuideFooter;
export default GuideFooter;