From e78a3172604932c97610a88e993ce8b59ca0cb5e Mon Sep 17 00:00:00 2001
From: Misode <Misoloo64@gmail.com>
Date: Thu, 20 Oct 2022 04:22:40 +0200
Subject: [PATCH] =?UTF-8?q?Add=20a=20list=20of=20sponsors=20=E2=9D=A4?=
 =?UTF-8?q?=EF=B8=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/pages/Home.tsx | 18 ++++++++++++++++++
 src/styles/global.css  | 36 ++++++++++++++++++++++++++++++++++++
 2 files changed, 54 insertions(+)

diff --git a/src/app/pages/Home.tsx b/src/app/pages/Home.tsx
index b802ce4d..b1704a63 100644
--- a/src/app/pages/Home.tsx
+++ b/src/app/pages/Home.tsx
@@ -35,6 +35,7 @@ export function Home({}: Props) {
 					<Tools />
 				</div>}
 			</div>
+			<Sponsors />
 			<Giscus />
 			<Footer />
 		</div>
@@ -125,3 +126,20 @@ function Changelog() {
 		{latestChanges?.map(change => <ChangelogEntry minimal={!hugeScreen} short={true} change={change} />)}
 	</ToolGroup>
 }
+
+function Sponsors() {
+	const { value } = useAsync(() => {
+		return fetch('https://ghs.vercel.app/sponsors/misode').then(r => r.json())
+	}, [])
+
+	return <div class="sponsors">
+		<h3>Sponsored by</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}`} />
+				</a>
+			)}
+		</div>
+	</div>
+}
diff --git a/src/styles/global.css b/src/styles/global.css
index 21fa7aa3..15d09a3e 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1970,6 +1970,42 @@ hr {
 	background-color: var(--selection) !important;
 }
 
+.sponsors {
+	margin: 40px auto;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+.sponsors h3 {
+	margin-bottom: 10px;
+	font-weight: normal;
+	color: var(--text-2);
+}
+
+.sponsors-list {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+}
+
+.sponsors-list > * {
+	margin: 3px;
+	border-radius: 50%;
+	background-color: var(--background-2);
+	width: 48px;
+	height: 48px;
+	transition: background-color 200ms;
+}
+
+.sponsors-list > * img {
+	border-radius: 50%;
+}
+
+.sponsors-list > *:hover {
+	background-color: var(--background-3);
+}
+
 .giscus-container {
 	margin-top: 16px;
 	min-height: 325.667px;