Files
udlbook/src/components/Footer/index.jsx
2024-06-27 19:41:34 +01:00

85 lines
3.3 KiB
JavaScript
Executable File

import {
FooterContainer,
FooterWrap,
SocialIconLink,
SocialIcons,
SocialLogo,
SocialMedia,
SocialMediaWrap,
WebsiteRights,
} from "@/components/Footer/FooterElements";
import { FaGithub, FaLinkedin } from "react-icons/fa";
import { FaSquareXTwitter } from "react-icons/fa6";
import { animateScroll as scroll } from "react-scroll";
const images = [
"https://freepik.com/free-vector/hand-coding-concept-illustration_21864184.htm#query=coding&position=17&from_view=search&track=sph&uuid=5896d847-38e4-4cb9-8fe1-103041c7c933",
"https://freepik.com/free-vector/mathematics-concept-illustration_10733824.htm#query=professor&position=13&from_view=search&track=sph&uuid=5b1a188a-64c5-45af-aae2-8573bc1bed3c",
"https://freepik.com/free-vector/content-concept-illustration_7171429.htm#query=media&position=3&from_view=search&track=sph&uuid=c7e35cf2-d85d-4bba-91a6-1cd883dcf153",
"https://freepik.com/free-vector/library-concept-illustration_9148008.htm#query=library&position=40&from_view=search&track=sph&uuid=abecc792-b6b2-4ec0-b318-5e6cc73ba649",
];
const socials = [
{
href: "https://twitter.com/SimonPrinceAI",
icon: FaSquareXTwitter,
alt: "Twitter",
},
{
href: "https://linkedin.com/in/simon-prince-615bb9165/",
icon: FaLinkedin,
alt: "LinkedIn",
},
{
href: "https://github.com/udlbook/udlbook",
icon: FaGithub,
alt: "GitHub",
},
];
export default function Footer() {
const scrollToHome = () => {
scroll.scrollToTop();
};
return (
<>
<FooterContainer>
<FooterWrap>
<SocialMedia>
<SocialMediaWrap>
<SocialLogo to="/udlbook" onClick={scrollToHome}>
Understanding Deep Learning
</SocialLogo>
<WebsiteRights>
&copy; {new Date().getFullYear()} Simon J.D. Prince
</WebsiteRights>
<WebsiteRights>
Images by StorySet on FreePik:{" "}
{images.map((image, index) => (
<a key={index} href={image}>
[{index + 1}]
</a>
))}
</WebsiteRights>
<SocialIcons>
{socials.map((social, index) => (
<SocialIconLink
key={index}
href={social.href}
target="_blank"
aria-label={social.alt}
alt={social.alt}
>
<social.icon />
</SocialIconLink>
))}
</SocialIcons>
</SocialMediaWrap>
</SocialMedia>
</FooterWrap>
</FooterContainer>
</>
);
}