From 36d274ee8bd3f194a6d4eeb18b879cd1ce87472f Mon Sep 17 00:00:00 2001
From: r-freeman <hello@ryanfreeman.dev>
Date: Sat, 21 Jan 2023 22:59:27 +0000
Subject: [PATCH] Added GitHub icons to projects page

---
 components/LinkIcon.tsx   | 12 ++++++++++++
 components/SocialLink.tsx | 16 ++++++++++++++++
 pages/index.tsx           | 16 +---------------
 pages/projects.tsx        | 20 +++++++-------------
 4 files changed, 36 insertions(+), 28 deletions(-)
 create mode 100644 components/LinkIcon.tsx
 create mode 100644 components/SocialLink.tsx

diff --git a/components/LinkIcon.tsx b/components/LinkIcon.tsx
new file mode 100644
index 0000000..996acb6
--- /dev/null
+++ b/components/LinkIcon.tsx
@@ -0,0 +1,12 @@
+import {Props} from '@/types'
+
+export function LinkIcon(props: Props) {
+    return (
+        <svg viewBox="0 0 24 24" aria-hidden="true" {...props}>
+            <path
+                d="M15.712 11.823a.75.75 0 1 0 1.06 1.06l-1.06-1.06Zm-4.95 1.768a.75.75 0 0 0 1.06-1.06l-1.06 1.06Zm-2.475-1.414a.75.75 0 1 0-1.06-1.06l1.06 1.06Zm4.95-1.768a.75.75 0 1 0-1.06 1.06l1.06-1.06Zm3.359.53-.884.884 1.06 1.06.885-.883-1.061-1.06Zm-4.95-2.12 1.414-1.415L12 6.344l-1.415 1.413 1.061 1.061Zm0 3.535a2.5 2.5 0 0 1 0-3.536l-1.06-1.06a4 4 0 0 0 0 5.656l1.06-1.06Zm4.95-4.95a2.5 2.5 0 0 1 0 3.535L17.656 12a4 4 0 0 0 0-5.657l-1.06 1.06Zm1.06-1.06a4 4 0 0 0-5.656 0l1.06 1.06a2.5 2.5 0 0 1 3.536 0l1.06-1.06Zm-7.07 7.07.176.177 1.06-1.06-.176-.177-1.06 1.06Zm-3.183-.353.884-.884-1.06-1.06-.884.883 1.06 1.06Zm4.95 2.121-1.414 1.414 1.06 1.06 1.415-1.413-1.06-1.061Zm0-3.536a2.5 2.5 0 0 1 0 3.536l1.06 1.06a4 4 0 0 0 0-5.656l-1.06 1.06Zm-4.95 4.95a2.5 2.5 0 0 1 0-3.535L6.344 12a4 4 0 0 0 0 5.656l1.06-1.06Zm-1.06 1.06a4 4 0 0 0 5.657 0l-1.061-1.06a2.5 2.5 0 0 1-3.535 0l-1.061 1.06Zm7.07-7.07-.176-.177-1.06 1.06.176.178 1.06-1.061Z"
+                fill="currentColor"
+            />
+        </svg>
+    )
+}
\ No newline at end of file
diff --git a/components/SocialLink.tsx b/components/SocialLink.tsx
new file mode 100644
index 0000000..4b1348c
--- /dev/null
+++ b/components/SocialLink.tsx
@@ -0,0 +1,16 @@
+import Link from 'next/link'
+import {ElementType} from 'react'
+
+type SocialLink = {
+    href: string
+    icon: ElementType
+}
+
+export function SocialLink({icon: Icon, href}: SocialLink) {
+    return (
+        <Link className="group -m-1 p-1" href={href}>
+            <Icon
+                className="h-6 w-6 fill-zinc-500 transition group-hover:fill-zinc-600 dark:fill-zinc-400 dark:group-hover:fill-zinc-300"/>
+        </Link>
+    )
+}
\ No newline at end of file
diff --git a/pages/index.tsx b/pages/index.tsx
index 35c2aed..cd1ef43 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,7 +1,5 @@
 import Head from 'next/head'
-import Link from 'next/link'
 import {GetStaticProps} from 'next'
-import {ElementType} from 'react'
 
 import {Card} from '@/components/Card'
 import {Button} from '@/components/Button'
@@ -11,6 +9,7 @@ import {
     LinkedInIcon,
     TwitterIcon
 } from '@/components/SocialIcons'
+import {SocialLink} from '@/components/SocialLink'
 import {formatDate} from '@/lib/formatDate'
 import {generateRssFeed} from '@/lib/generateRssFeed'
 import {generateSitemap} from '@/lib/generateSitemap'
@@ -30,11 +29,6 @@ type Work = {
     }
 }
 
-type SocialLink = {
-    href: string
-    icon: ElementType
-}
-
 function BriefcaseIcon(props: { className: string }) {
     return (
         <svg
@@ -86,14 +80,6 @@ function Article(article: Article) {
     )
 }
 
-function SocialLink({icon: Icon, href}: SocialLink) {
-    return (
-        <Link className="group -m-1 p-1" href={href}>
-            <Icon
-                className="h-6 w-6 fill-zinc-500 transition group-hover:fill-zinc-600 dark:fill-zinc-400 dark:group-hover:fill-zinc-300"/>
-        </Link>
-    )
-}
 
 function Resume() {
     const work: Work[] = [
diff --git a/pages/projects.tsx b/pages/projects.tsx
index fc20bcc..e4358ce 100644
--- a/pages/projects.tsx
+++ b/pages/projects.tsx
@@ -2,7 +2,8 @@ import Head from 'next/head'
 
 import {Card} from '@/components/Card'
 import {SimpleLayout} from '@/components/SimpleLayout'
-import {Props} from 'types'
+import {GitHubIcon} from '@/components/SocialIcons'
+import {SocialLink} from '@/components/SocialLink'
 
 type Project = {
     name: string
@@ -46,17 +47,6 @@ const projects: Project[] = [
     }
 ]
 
-function LinkIcon(props: Props) {
-    return (
-        <svg viewBox="0 0 24 24" aria-hidden="true" {...props}>
-            <path
-                d="M15.712 11.823a.75.75 0 1 0 1.06 1.06l-1.06-1.06Zm-4.95 1.768a.75.75 0 0 0 1.06-1.06l-1.06 1.06Zm-2.475-1.414a.75.75 0 1 0-1.06-1.06l1.06 1.06Zm4.95-1.768a.75.75 0 1 0-1.06 1.06l1.06-1.06Zm3.359.53-.884.884 1.06 1.06.885-.883-1.061-1.06Zm-4.95-2.12 1.414-1.415L12 6.344l-1.415 1.413 1.061 1.061Zm0 3.535a2.5 2.5 0 0 1 0-3.536l-1.06-1.06a4 4 0 0 0 0 5.656l1.06-1.06Zm4.95-4.95a2.5 2.5 0 0 1 0 3.535L17.656 12a4 4 0 0 0 0-5.657l-1.06 1.06Zm1.06-1.06a4 4 0 0 0-5.656 0l1.06 1.06a2.5 2.5 0 0 1 3.536 0l1.06-1.06Zm-7.07 7.07.176.177 1.06-1.06-.176-.177-1.06 1.06Zm-3.183-.353.884-.884-1.06-1.06-.884.883 1.06 1.06Zm4.95 2.121-1.414 1.414 1.06 1.06 1.415-1.413-1.06-1.061Zm0-3.536a2.5 2.5 0 0 1 0 3.536l1.06 1.06a4 4 0 0 0 0-5.656l-1.06 1.06Zm-4.95 4.95a2.5 2.5 0 0 1 0-3.535L6.344 12a4 4 0 0 0 0 5.656l1.06-1.06Zm-1.06 1.06a4 4 0 0 0 5.657 0l-1.061-1.06a2.5 2.5 0 0 1-3.535 0l-1.061 1.06Zm7.07-7.07-.176-.177-1.06 1.06.176.178 1.06-1.061Z"
-                fill="currentColor"
-            />
-        </svg>
-    )
-}
-
 export default function Projects() {
     return (
         <>
@@ -91,7 +81,11 @@ export default function Projects() {
                             </h2>
                             <Card.Description>{project.description}</Card.Description>
                             <p className="relative z-10 mt-6 flex text-sm font-medium text-zinc-400 transition group-hover:text-indigo-500 dark:text-zinc-200">
-                                <LinkIcon className="h-6 w-6 flex-none"/>
+                                <SocialLink
+                                    href={project.link.href}
+                                    aria-label={`Checkout ${project.name} on GitHub`}
+                                    icon={GitHubIcon}
+                                />
                                 <span className="ml-2">{project.link.label}</span>
                             </p>
                         </Card>