
I have added the social links to my blog. The links are rendered in a react component called SocialLinks. At the moment I have hand-coded the list but in future I will make this more dynamic.
import React from "react";
export default function SocialLinks() {
return (
<div className="social-links">
<div className="social-links-header">
<h4>Follow me</h4>
</div>
<div className="social-links-list" role="list">
<div className="social-link twitter" role="listitem">
<a target="_blank" href="https://twitter.com/MuncePhilip?ref_src=twsrc%5Etfw" className="twitter-follow-button" data-size="large" data-show-count="false">
<i class="bi bi-twitter"></i> Twitter
</a>
</div>
<div className="social-link github" role="listitem">
<a target="_blank" href="https://github.com/muncey">
<i class="bi bi-github"></i> GitHub
</a>
</div>
</div>
</div>
);
}
For styling of the list I am using flex box to render a flex column.
.social-links {
display: flex;
flex-direction: column;
}
.social-links-header h4 {
font-size: 0.9em;
}
.social-links-list {
background-color: white;
border: 1px #c3c3c3 dashed;
padding: 5px;
}
.social-link {
font-size: 0.9em;
padding: 5px;
}
.social-link a {
text-decoration: none;
}
Leave a Reply