From 1871fbf2addc89e8f42642d6827c06576b1ac467 Mon Sep 17 00:00:00 2001
From: Jan Post <Rm2k-Freak@web.de>
Date: Sat, 11 May 2024 20:47:16 +0200
Subject: [PATCH] Implement Partner Overview (#420)

---
 src/components/Home/index.tsx                 |  4 +--
 src/components/Sponsors/PartnerOverview.tsx   | 30 +++++++++++++++++++
 .../{Sponsors.tsx => SponsorBanner.tsx}       |  2 +-
 src/css/custom.css                            |  4 +++
 4 files changed, 37 insertions(+), 3 deletions(-)
 create mode 100644 src/components/Sponsors/PartnerOverview.tsx
 rename src/components/Sponsors/{Sponsors.tsx => SponsorBanner.tsx} (97%)

diff --git a/src/components/Home/index.tsx b/src/components/Home/index.tsx
index 19a8af1489..2eb7e2beeb 100644
--- a/src/components/Home/index.tsx
+++ b/src/components/Home/index.tsx
@@ -12,7 +12,7 @@ import Button from '../Button';
 import TeamFeature from '../Team';
 import ThemedImage from '@theme/ThemedImage';
 import useBaseUrl from '@docusaurus/useBaseUrl';
-import Sponsors from '../Sponsors/Sponsors';
+import SponsorBanner from '../Sponsors/SponsorBanner';
 
 export default function Home({ recentPosts }: BlogProps) {
   function clampAndFormatMinutes(minutes: number) {
@@ -69,7 +69,7 @@ export default function Home({ recentPosts }: BlogProps) {
       </div>
       <div className="m-4 flex flex-col space-y-4">
         <HomepageFeature title="Sponsors" blur={true}>
-          <Sponsors />
+          <SponsorBanner />
         </HomepageFeature>
         <HomepageFeature title="About" compact={true}>
           <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 xl:gap-6 w-full">
diff --git a/src/components/Sponsors/PartnerOverview.tsx b/src/components/Sponsors/PartnerOverview.tsx
new file mode 100644
index 0000000000..a59cfc13c8
--- /dev/null
+++ b/src/components/Sponsors/PartnerOverview.tsx
@@ -0,0 +1,30 @@
+import React, { useState, useEffect } from 'react';
+import { useColorMode } from '@docusaurus/theme-common';
+import { sanitize } from 'dompurify';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faSpinner } from '@fortawesome/free-solid-svg-icons';
+
+export default function PartnerOverview(): React.JSX.Element {
+  const [data, setData] = useState<string | null>(null);
+  const { colorMode } = useColorMode();
+
+  async function fetchData(mode: string): Promise<void> {
+    const response = await fetch(`https://build.betaflight.com/api/configurator/sponsors/${mode}/all`);
+    setData(await response.text());
+  }
+
+  useEffect(() => {
+    fetchData(colorMode);
+  }, [colorMode]);
+
+  if (!data) {
+    return (
+      <div className="min-h-[60px] text-2xl flex justify-center items-center">
+        <FontAwesomeIcon className="mr-2" icon={faSpinner} spin />
+        Loading...
+      </div>
+    );
+  }
+
+  return <div id="partner_overview" className="min-h-[54px]" dangerouslySetInnerHTML={{ __html: sanitize(data) }} />;
+}
diff --git a/src/components/Sponsors/Sponsors.tsx b/src/components/Sponsors/SponsorBanner.tsx
similarity index 97%
rename from src/components/Sponsors/Sponsors.tsx
rename to src/components/Sponsors/SponsorBanner.tsx
index 11534038e9..0abac14691 100644
--- a/src/components/Sponsors/Sponsors.tsx
+++ b/src/components/Sponsors/SponsorBanner.tsx
@@ -6,7 +6,7 @@ import { faSpinner } from '@fortawesome/free-solid-svg-icons';
 
 const cycleIntervalMs = 30000; // 10 seconds
 
-export default function Sponsors(): React.JSX.Element {
+export default function SponsorBanner(): React.JSX.Element {
   const [loading, setLoading] = useState<boolean>(true);
   const [data, setData] = useState<string | null>(null);
   const [counter, setCounter] = useState<number>(0);
diff --git a/src/css/custom.css b/src/css/custom.css
index 9895dfc004..00b1d8da03 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -51,3 +51,7 @@ html {
 .img_sponsor {
   @apply p-[10px] max-h-[99px] max-w-[330px] inline mx-4;
 }
+
+#partner_overview .img_sponsor {
+  @apply p-0 max-h-[60px] max-w-[200px] inline m-4;
+}