From 7607e1fccfa1d176a6622c84bee1f3b3e01998df Mon Sep 17 00:00:00 2001
From: Misode <Misoloo64@gmail.com>
Date: Wed, 9 Nov 2022 19:31:41 +0100
Subject: [PATCH] Add ko-fi supporters

---
 src/app/pages/Home.tsx | 42 ++++++++++++++++++++++++++++++++++++++----
 1 file changed, 38 insertions(+), 4 deletions(-)

diff --git a/src/app/pages/Home.tsx b/src/app/pages/Home.tsx
index b1704a63..91e5cc98 100644
--- a/src/app/pages/Home.tsx
+++ b/src/app/pages/Home.tsx
@@ -127,17 +127,51 @@ function Changelog() {
 	</ToolGroup>
 }
 
+const KOFI_SUPPORTERS = [
+	{
+		name: 'RoarkCats',
+		avatar: 'https://ko-fi.com/img/anon7.png',
+	},
+	{
+		name: 'MC Silver',
+		avatar: 'https://ko-fi.com/img/anon7.png',
+	},
+	{
+		name: 'Hugman',
+		avatar: 'https://storage.ko-fi.com/cdn/useruploads/daf75a1c-9900-4da0-b9a8-e394b2c87e8c_tiny.png',
+		url: 'https://ko-fi.com/G2G5DNROO',
+	},
+	{
+		name: 'TelepathicGrunt',
+		avatar: 'https://cdn.discordapp.com/avatars/369282168624644106/47af47d7d5d88c703c1cd9555877e76a.webp?size=80',
+		url: 'https://github.com/TelepathicGrunt',
+	},
+	{
+		name: 'oitsjustjose',
+		avatar: 'https://ko-fi.com/img/anon10.png',
+	},
+] 
+
 function Sponsors() {
 	const { value } = useAsync(() => {
 		return fetch('https://ghs.vercel.app/sponsors/misode').then(r => r.json())
 	}, [])
 
+	const supporters = useMemo(() => {
+		const githubSponsors = value?.sponsors?.map((sponsor: any) => ({
+			name: sponsor.handle,
+			avatar: sponsor.avatar,
+			url: sponsor.profile,
+		})) ?? []
+		return [...githubSponsors, ...KOFI_SUPPORTERS]
+	}, [value])
+
 	return <div class="sponsors">
-		<h3>Sponsored by</h3>
+		<h3>Supporters</h3>
 		<div class="sponsors-list">
-			{value?.sponsors?.map((s: any) =>
-				<a class="tooltipped tip-se" href={s.profile} target="_blank" aria-label={`@${s.handle}`}>
-					<img width={48} height={48} src={s.avatar} alt={`@${s.handle}`} />
+			{supporters?.map((s: any) =>
+				<a class="tooltipped tip-se" href={s.url} target="_blank" aria-label={s.name}>
+					<img width={48} height={48} src={s.avatar} alt={s.name} />
 				</a>
 			)}
 		</div>