From 819826422b78cfe36ddd29c65570d7e0a27f1932 Mon Sep 17 00:00:00 2001
From: r-freeman <hello@ryanfreeman.dev>
Date: Thu, 26 Jan 2023 22:21:15 +0000
Subject: [PATCH] Added fork count to projects

---
 components/ForkIcon.tsx | 10 ++++++++++
 lib/github.ts           |  1 +
 pages/projects.tsx      | 30 +++++++++++++++++++++---------
 types/index.ts          |  1 +
 4 files changed, 33 insertions(+), 9 deletions(-)
 create mode 100644 components/ForkIcon.tsx

diff --git a/components/ForkIcon.tsx b/components/ForkIcon.tsx
new file mode 100644
index 0000000..987f09f
--- /dev/null
+++ b/components/ForkIcon.tsx
@@ -0,0 +1,10 @@
+import type {Props} from '@/types'
+
+export function ForkIcon(props: Props) {
+    return (
+        <svg viewBox="0 0 16 16" aria-label="forks" data-view-component="true" {...props}>
+            <path fillRule="evenodd"
+                  d="M5 3.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0zm0 2.122a2.25 2.25 0 1 0-1.5 0v.878A2.25 2.25 0 0 0 5.75 8.5h1.5v2.128a2.251 2.251 0 1 0 1.5 0V8.5h1.5a2.25 2.25 0 0 0 2.25-2.25v-.878a2.25 2.25 0 1 0-1.5 0v.878a.75.75 0 0 1-.75.75h-4.5A.75.75 0 0 1 5 6.25v-.878zm3.75 7.378a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0zm3-8.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5z"/>
+        </svg>
+    )
+}
\ No newline at end of file
diff --git a/lib/github.ts b/lib/github.ts
index 6f3494d..5f39128 100644
--- a/lib/github.ts
+++ b/lib/github.ts
@@ -31,6 +31,7 @@ export async function getPinnedRepos() {
                       description
                       url
                       stargazerCount
+                      forkCount
                       primaryLanguage {
                         name
                         color
diff --git a/pages/projects.tsx b/pages/projects.tsx
index a27e31d..18edb16 100644
--- a/pages/projects.tsx
+++ b/pages/projects.tsx
@@ -4,6 +4,7 @@ import {Card} from '@/components/Card'
 import {SimpleLayout} from '@/components/SimpleLayout'
 import {SocialLink} from '@/components/SocialLink'
 import {StarIcon} from '@/components/StarIcon'
+import {ForkIcon} from '@/components/ForkIcon'
 import {getPinnedRepos} from '@/lib/github'
 import {numberFormat} from '@/lib/numberFormat'
 import type {Repo} from '@/types'
@@ -50,15 +51,26 @@ export default function Projects({pinnedRepos}: { pinnedRepos: Repo[] }) {
                                         className="w-4 h-4 rounded-full order-first"
                                         style={{backgroundColor: repo.primaryLanguage.color}}/>
                                 </p>
-                                <p className="relative z-10 flex items-center">
-                                    <span className="ml-2 order-last">{numberFormat(repo.stargazerCount)}</span>
-                                    <SocialLink
-                                        href={repo.url}
-                                        ariaLabel={`Star ${repo.name} on GitHub`}
-                                        icon={StarIcon}
-                                        className={'w-5 h-5'}
-                                    />
-                                </p>
+                                <div className="flex space-x-4">
+                                    <p className="relative z-10 flex items-center">
+                                        <span className="ml-2 order-last">{numberFormat(repo.stargazerCount)}</span>
+                                        <SocialLink
+                                            href={repo.url}
+                                            ariaLabel={`Star ${repo.name} on GitHub`}
+                                            icon={StarIcon}
+                                            className={'w-5 h-5'}
+                                        />
+                                    </p>
+                                    <p className="relative z-10 flex items-center">
+                                        <span className="ml-2 order-last">{numberFormat(repo.forkCount)}</span>
+                                        <SocialLink
+                                            href={repo.url}
+                                            ariaLabel={`Fork ${repo.name} on GitHub`}
+                                            icon={ForkIcon}
+                                            className={'w-5 h-5'}
+                                        />
+                                    </p>
+                                </div>
                             </div>
                         </Card>
                     ))}
diff --git a/types/index.ts b/types/index.ts
index ebd5165..a7d74ce 100644
--- a/types/index.ts
+++ b/types/index.ts
@@ -17,6 +17,7 @@ export type Repo = {
     description: string
     url: string
     stargazerCount: number
+    forkCount: number
     primaryLanguage: {
         name: string
         color: string