AJR/TechRadarAJR
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

This fixes #49 social links

Browse Source
This commit is contained in:
dennis.ludwig
2021-06-29 14:17:48 +02:00
parent 29d9b9ef60
commit 8884ee3931
4 changed files with 120 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -40,6 +40,7 @@
"query-string": "^7.0.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-icons": "^4.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"sass": "^1.34.0",

174
src/components/FooterEnd/FooterEnd.tsx
View File

@@ -1,79 +1,107 @@
import React from "react";
import classNames from "classnames";
import {
FaFacebookF,
FaTwitter,
FaLinkedinIn,
FaXing,
FaYoutube,
FaGithub,
FaInstagram,
} from "react-icons/fa";
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>
interface Props {
modifier?: "in-sidebar";
}
const FooterEnd: React.FC<Props> = (modifier) => (
<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-copyright">
<p>
<a
href="https://www.aoe.com/en/imprint.html"
target="_blank"
rel="noopener noreferrer"
>
Legal Information
</a>
</p>
<div className="footer-social__links">
<a
href="https://www.facebook.com/aoepeople"
target="_blank"
rel="noopener noreferrer"
className="social-icon-a"
>
<FaFacebookF className="social-icon" />
</a>
<a
href="https://twitter.com/aoepeople"
target="_blank"
rel="noopener noreferrer"
className="social-icon-a"
>
<FaTwitter className="social-icon" />
</a>
<a
href="https://www.linkedin.com/company/aoe"
target="_blank"
rel="noopener noreferrer"
className="social-icon-a"
>
<FaLinkedinIn className="social-icon" />
</a>
<a
href="https://www.xing.com/company/aoe"
target="_blank"
rel="noopener noreferrer"
className="social-icon-a"
>
<FaXing className="social-icon" />
</a>
<a
href="https://www.instagram.com/aoepeople"
target="_blank"
rel="noopener noreferrer"
className="social-icon-a"
>
<FaInstagram className="social-icon" />
</a>
<a
href="https://www.youtube.com/user/aoepeople"
target="_blank"
rel="noopener noreferrer"
className="social-icon-a"
>
<FaYoutube className="social-icon" />
</a>
<a
href="https://github.com/aoepeople"
target="_blank"
rel="noopener noreferrer"
className="social-icon-a"
>
<FaGithub className="social-icon" />
</a>
</div>
</div>
);
}
<div className="footer-copyright">
<p>
<a
href="https://www.aoe.com/en/imprint.html"
target="_blank"
rel="noopener noreferrer"
>
Legal Information
</a>
</p>
</div>
</div>
);
export default FooterEnd;

37
src/styles/components/social-icon.scss
View File

@@ -1,27 +1,16 @@
.social-icon {
font-weight: normal;
font-style: normal;
font-size: 16px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
.social-icon-a {
display: inline-flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
width: 30px;
height: 30px;
margin: 0 5px;
background-color: var(--color-white);
border-radius: 50%;
padding: 7px;
margin: 0 5px 0 5px;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: "liga";
}
.social-icon {
font-size: 16px; /* Preferred icon size */
color: var(--color-gray-dark);
}

5
yarn.lock
View File

@@ -9270,6 +9270,11 @@ react-error-overlay@^6.0.9:
resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a"
integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==
react-icons@^4.2.0:
version "4.2.0"
resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.2.0.tgz#6dda80c8a8f338ff96a1851424d63083282630d0"
integrity sha512-rmzEDFt+AVXRzD7zDE21gcxyBizD/3NqjbX6cmViAgdqfJ2UiLer8927/QhhrXQV7dEj/1EGuOTPp7JnLYVJKQ==
react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
version "16.13.1"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"