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

Extract social icons to component and add to mobile nav bar

Browse Source
This commit is contained in:
Beau Findlay
2024-04-24 14:42:52 +01:00
parent 2d5676f596
commit 460ae6580a
3 changed files with 39 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,4 @@
import { FaEnvelope, FaGithub, FaLinkedin } from "react-icons/fa6"; import SocialIcons from "./SocialIcons";
export default function Footer() { export default function Footer() {
const currentYear = new Date().getFullYear(); const currentYear = new Date().getFullYear();
@@ -7,29 +7,7 @@ export default function Footer() {
<footer className="mt-auto"> <footer className="mt-auto">
<div className="mx-auto py-8"> <div className="mx-auto py-8">
<div className="md:flex md:items-center md:justify-between"> <div className="md:flex md:items-center md:justify-between">
<div className="flex space-x-6 md:order-2"> <SocialIcons />
<a
href="https://github.com/bdfin"
className="text-slate-200 hover:text-slate-500"
>
<span className="sr-only">GitHub</span>
<FaGithub size={20} />
</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={20} />
</a>
<a
href="mailto:me@beaufindlay.com"
className="text-slate-200 hover:text-slate-500"
>
<span className="sr-only">Email</span>
<FaEnvelope size={20} />
</a>
</div>
<p className="mt-8 text-xs leading-5 text-slate-100 md:order-1 md:mt-0"> <p className="mt-8 text-xs leading-5 text-slate-100 md:order-1 md:mt-0">
&copy; {currentYear} Beau Findlay. All rights reserved. &copy; {currentYear} Beau Findlay. All rights reserved.
</p> </p>

5
src/Client/src/components/NavBar.tsx
View File

@@ -3,7 +3,7 @@ import { useState } from "react";
import { FaBars, FaXmark } from "react-icons/fa6"; import { FaBars, FaXmark } from "react-icons/fa6";
import { NavLink } from "react-router-dom"; import { NavLink } from "react-router-dom";
import logo from "../assets/logo.webp"; import logo from "../assets/logo.webp";
import SocialIcons from "./SocialIcons";
export default function NavBar() { export default function NavBar() {
const [mobileMenuOpen, setMobileMenuOpen] = useState(false); const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
@@ -77,6 +77,9 @@ export default function NavBar() {
This App This App
</NavLink> </NavLink>
</div> </div>
<div className="flex justify-center items-center py-8">
<SocialIcons size={24} />
</div>
</div> </div>
</div> </div>
</Dialog.Panel> </Dialog.Panel>

33
src/Client/src/components/SocialIcons.tsx Normal file
View File

@@ -0,0 +1,33 @@
import { FaEnvelope, FaGithub, FaLinkedin } from "react-icons/fa6";
interface Props {
size?: number;
}
export default function SocialIcons({ size = 20 }: Props) {
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>
</div>
);
}