beau/my-portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Render social icons from array

Browse Source
This commit is contained in:
Beau Findlay
2024-04-24 14:50:21 +01:00
parent 460ae6580a
commit a85b63b58a
2 changed files with 29 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/Client/src/components/Footer.tsx
View File

@@ -8,7 +8,7 @@ export default function Footer() {
<div className="mx-auto py-8">
<div className="md:flex md:items-center md:justify-between">
<SocialIcons />
<p className="mt-8 text-xs leading-5 text-slate-100 md:order-1 md:mt-0">
<p className="mt-4 text-xs leading-5 text-slate-100 md:order-1 md:mt-0">
&copy; {currentYear} Beau Findlay. All rights reserved.
</p>
</div>

49
src/Client/src/components/SocialIcons.tsx
View File

@@ -5,29 +5,36 @@ interface Props {
}
export default function SocialIcons({ size = 20 }: Props) {
const socialIcons = [
{
name: "GitHub",
href: "https://github.com/bdfin",
icon: <FaGithub size={size} />,
},
{
name: "LinkedIn",
href: "https://www.linkedin.com/in/beau-findlay/",
icon: <FaLinkedin size={size} />,
},
{
name: "Email",
href: "mailto:me@beaufindlay.com",
icon: <FaEnvelope size={size} />,
},
];
return (
<div className="flex space-x-6 md:order-2">
<a
href="https://github.com/bdfin"
className="text-slate-200 hover:text-slate-500"
>
<span className="sr-only">GitHub</span>
<FaGithub size={size} />
</a>
<a
href="https://www.linkedin.com/in/beau-findlay/"
className="text-slate-200 hover:text-slate-500"
>
<span className="sr-only">LinkedIn</span>
<FaLinkedin size={size} />
</a>
<a
href="mailto:me@beaufindlay.com"
className="text-slate-200 hover:text-slate-500"
>
<span className="sr-only">Email</span>
<FaEnvelope size={size} />
</a>
{socialIcons.map((socialIcon) => (
<a
key={socialIcon.name}
href={socialIcon.href}
className="text-slate-200 hover:text-slate-500"
>
<span className="sr-only">{socialIcon.name}</span>
{socialIcon.icon}
</a>
))}
</div>
);
}