add linkedin logo.

src/components/Connect/Connect.test.tsx

@@ -19,6 +19,7 @@ test("shows connect", () => {
         "feed",
         "github",
         "instagram",
+        "linkedin",
         "twitch",
         "x",
         "youtube",

src/components/Connect/Connect.tsx

@@ -23,13 +23,14 @@ const Connect: FC = () => {
             </div>
 
             <div className="flex flex-wrap content-center justify-center gap-5">
-                <SocialLink platform="twitch" />
-                <SocialLink platform="github" />
-                <SocialLink platform="bluesky" />
                 <SocialLink platform="youtube" />
-                <SocialLink platform="x" />
-                <SocialLink platform="instagram" />
                 <SocialLink platform="discord" />
+                <SocialLink platform="bluesky" />
+                <SocialLink platform="linkedin" />
+                <SocialLink platform="github" />
+                <SocialLink platform="instagram" />
+                <SocialLink platform="x" />
+                <SocialLink platform="twitch" />
                 <SocialLink platform="feed" />
             </div>
         </div>

src/components/Footer/Footer.test.tsx

@@ -9,6 +9,7 @@ const labels = [
     "feed",
     "github",
     "instagram",
+    "linkedin",
     "twitch",
     "x",
     "youtube",

src/components/Footer/Footer.tsx

@@ -5,13 +5,14 @@ import SocialLink from "~/components/SocialLink"
 const Footer: FC = () => {
     return (
         <footer className="flex flex-wrap content-center justify-center gap-5 px-5 pb-20 pt-28">
-            <SocialLink platform="twitch" />
-            <SocialLink platform="github" />
-            <SocialLink platform="bluesky" />
             <SocialLink platform="youtube" />
-            <SocialLink platform="x" />
-            <SocialLink platform="instagram" />
             <SocialLink platform="discord" />
+            <SocialLink platform="bluesky" />
+            <SocialLink platform="linkedin" />
+            <SocialLink platform="github" />
+            <SocialLink platform="instagram" />
+            <SocialLink platform="x" />
+            <SocialLink platform="twitch" />
             <SocialLink platform="feed" />
         </footer>
     )

src/components/Icon/Icon.test.tsx

@@ -13,6 +13,7 @@ const icons = [
     "instagram",
     "javascript",
     "link",
+    "linkedin",
     "menu",
     "moon",
     "next",

src/components/Icon/Icon.tsx

@@ -9,6 +9,7 @@ import {
     GithubIcon,
     InstagramIcon,
     JavascriptIcon,
+    LinkedinIcon,
     LinkIcon,
     MenuIcon,
     MoonIcon,
@@ -50,6 +51,8 @@ const Icon: FC<IconProps> = ({name, ...props}) => {
             return <JavascriptIcon {...props} />
         case "link":
             return <LinkIcon {...props} />
+        case "linkedin":
+            return <LinkedinIcon {...props} />
         case "menu":
             return <MenuIcon {...props} />
         case "moon":

src/components/Icons/LinkedinIcon.tsx

@@ -0,0 +1,16 @@
+import type {FC} from "react"
+
+const LinkedinIcon: FC = props => {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            aria-label="linkedin"
+            {...props}
+        >
+            <path d="M20.5 2h-17A1.5 1.5 0 002 3.5v17A1.5 1.5 0 003.5 22h17a1.5 1.5 0 001.5-1.5v-17A1.5 1.5 0 0020.5 2zM8 19H5v-9h3zM6.5 8.25A1.75 1.75 0 118.3 6.5a1.78 1.78 0 01-1.8 1.75zM19 19h-3v-4.74c0-1.42-.6-1.93-1.38-1.93A1.74 1.74 0 0013 14.19a.66.66 0 000 .14V19h-3v-9h2.9v1.3a3.11 3.11 0 012.7-1.4c1.55 0 3.36.86 3.36 3.66z" />
+        </svg>
+    )
+}
+
+export default LinkedinIcon

src/components/Icons/index.ts

@@ -6,6 +6,7 @@ export {default as GatsbyIcon} from "~/components/Icons/GatsbyIcon"
 export {default as GithubIcon} from "~/components/Icons/GithubIcon"
 export {default as InstagramIcon} from "~/components/Icons/InstagramIcon"
 export {default as JavascriptIcon} from "~/components/Icons/JavascriptIcon"
+export {default as LinkedinIcon} from "~/components/Icons/LinkedinIcon"
 export {default as LinkIcon} from "~/components/Icons/LinkIcon"
 export {default as MenuIcon} from "~/components/Icons/MenuIcon"
 export {default as MoonIcon} from "~/components/Icons/MoonIcon"

src/components/SocialLink/SocialLink.test.tsx

@@ -28,6 +28,11 @@ test("instagram", () => {
     expect(screen.getByLabelText("instagram")).toBeInTheDocument()
 })
 
+test("linkedin", () => {
+    render(<SocialLink platform="linkedin" />)
+    expect(screen.getByLabelText("linkedin")).toBeInTheDocument()
+})
+
 test("twitter", () => {
     render(<SocialLink platform="twitter" />)
     expect(screen.getByLabelText("twitter")).toBeInTheDocument()

src/components/SocialLink/SocialLink.tsx

@@ -10,6 +10,7 @@ type SocialLinkProps = {
         | "github"
         | "instagram"
         | "feed"
+        | "linkedin"
         | "twitch"
         | "twitter"
         | "x"
@@ -46,6 +47,11 @@ const SocialLink: FC<SocialLinkProps> = ({platform}) => {
             name = "feed"
             break
 
+        case "linkedin":
+            url = "https://linkedin.com/in/bradgarropy"
+            name = "linkedin"
+            break
+
         case "twitch":
             url = "https://twitch.tv/bradgarropy"
             name = "twitch"