Rewrite styles to scss and use i respective components
This commit is contained in:
41
src/components/FooterEnd/FooterEnd.tsx
Normal file
41
src/components/FooterEnd/FooterEnd.tsx
Normal file
@@ -0,0 +1,41 @@
|
||||
import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import './footerend.scss';
|
||||
export default function FooterEnd({ modifier }: { modifier?: 'in-sidebar' }) {
|
||||
return (
|
||||
<div className={classNames('footer-end', { [`footer-end__${modifier}`]: modifier })}>
|
||||
<div className='footer-social'>
|
||||
<div className='footer-social__label'>
|
||||
<p>Follow us:</p>
|
||||
</div>
|
||||
<div className='footer-social__links'>
|
||||
<a className='social-links-icon' href='https://www.facebook.com/aoepeople' target='_blank' rel='noopener noreferrer'>
|
||||
<i className='socicon-facebook social-icon'></i>
|
||||
</a>
|
||||
<a className='social-links-icon' href='https://twitter.com/aoepeople' target='_blank' rel='noopener noreferrer'>
|
||||
<i className='socicon-twitter social-icon'></i>
|
||||
</a>
|
||||
<a className='social-links-icon' href='https://www.linkedin.com/company/aoe' target='_blank' rel='noopener noreferrer'>
|
||||
<i className='socicon-linkedin social-icon'></i>
|
||||
</a>
|
||||
<a className='social-links-icon' href='https://www.xing.com/company/aoe' target='_blank' rel='noopener noreferrer'>
|
||||
<i className='socicon-xing social-icon'></i>
|
||||
</a>
|
||||
<a className='social-links-icon' href='https://www.youtube.com/user/aoepeople' target='_blank' rel='noopener noreferrer'>
|
||||
<i className='socicon-youtube social-icon'></i>
|
||||
</a>
|
||||
<a className='social-links-icon' href='https://github.com/aoepeople' target='_blank' rel='noopener noreferrer'>
|
||||
<i className='socicon-github social-icon'></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className='footer-copyright'>
|
||||
<p>
|
||||
<a href='https://www.aoe.com/en/copyright-meta/legal-information.html' target='_blank' rel='noopener noreferrer'>
|
||||
Legal Information
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
36
src/components/FooterEnd/footerend.scss
Normal file
36
src/components/FooterEnd/footerend.scss
Normal file
@@ -0,0 +1,36 @@
|
||||
.footer-end {
|
||||
font-size: 12px;
|
||||
color: var(--color-gray-normal);
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 0 10px 0;
|
||||
|
||||
& a {
|
||||
color: var(--color-gray-normal);
|
||||
}
|
||||
|
||||
&__in-sidebar {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
@media (--until-sm) {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 20px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-social {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
|
||||
&__label {
|
||||
margin: 0 10px 0 0;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user