From 29756fad8fe66874fdccb2ed3ba1c110640dfa1f Mon Sep 17 00:00:00 2001
From: developomp <developomp@gmail.com>
Date: Sun, 9 Jan 2022 11:26:51 +0900
Subject: [PATCH] separated github icon link to separate file

---
 source/src/components/Footer.tsx         | 29 ++--------------
 source/src/components/GithubLinkIcon.tsx | 42 ++++++++++++++++++++++++
 2 files changed, 44 insertions(+), 27 deletions(-)
 create mode 100644 source/src/components/GithubLinkIcon.tsx

diff --git a/source/src/components/Footer.tsx b/source/src/components/Footer.tsx
index be12154..ee80fdc 100644
--- a/source/src/components/Footer.tsx
+++ b/source/src/components/Footer.tsx
@@ -1,9 +1,7 @@
 import styled from "styled-components"
 
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
-import { faGithub } from "@fortawesome/free-brands-svg-icons"
-
 import theming from "../styles/theming"
+import GithubLinkIcon from "./GithubLinkIcon"
 
 const StyledFooter = styled.footer`
 	display: flex;
@@ -40,24 +38,6 @@ const StyledFooterContainer = styled.div`
 	max-width: ${theming.size.screen_size2};
 `
 
-const StyledGithubLink = styled.a`
-	font-size: 2.5rem;
-
-	color: ${(props) =>
-		theming.theme(props.theme.currentTheme, {
-			light: "lightgrey",
-			dark: "grey",
-		})};
-
-	&:hover {
-		color: ${(props) =>
-			theming.theme(props.theme.currentTheme, {
-				light: theming.light.color0,
-				dark: theming.dark.color0,
-			})};
-	}
-`
-
 const Footer = () => {
 	return (
 		<StyledFooter>
@@ -66,12 +46,7 @@ const Footer = () => {
 					Created by <b>developomp</b>
 				</div>
 
-				<StyledGithubLink
-					href="https://github.com/developomp/developomp-site"
-					target="_blank"
-				>
-					<FontAwesomeIcon icon={faGithub} />
-				</StyledGithubLink>
+				<GithubLinkIcon link="https://github.com/developomp/developomp-site" />
 			</StyledFooterContainer>
 		</StyledFooter>
 	)
diff --git a/source/src/components/GithubLinkIcon.tsx b/source/src/components/GithubLinkIcon.tsx
new file mode 100644
index 0000000..95c7772
--- /dev/null
+++ b/source/src/components/GithubLinkIcon.tsx
@@ -0,0 +1,42 @@
+import { ReactNode } from "react"
+import styled from "styled-components"
+
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { faGithub } from "@fortawesome/free-brands-svg-icons"
+
+import theming from "../styles/theming"
+
+const StyledGithubLink = styled.a<{ size?: string }>`
+	font-size: ${(props) => props.size || "2.5rem"};
+
+	color: ${(props) =>
+		theming.theme(props.theme.currentTheme, {
+			light: "lightgrey",
+			dark: "grey",
+		})};
+
+	:hover {
+		color: ${(props) =>
+			theming.theme(props.theme.currentTheme, {
+				light: theming.light.color0,
+				dark: theming.dark.color0,
+			})};
+	}
+`
+
+interface GithubLinkIconProps {
+	link: string
+	size?: string
+	children?: ReactNode
+}
+
+const GithubLinkIcon = (props: GithubLinkIconProps) => {
+	return (
+		<StyledGithubLink size={props.size} href={props.link} target="_blank">
+			<FontAwesomeIcon icon={faGithub} />
+			{props.children}
+		</StyledGithubLink>
+	)
+}
+
+export default GithubLinkIcon