Implement Partner Overview (betaflight#420)

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">

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) }} />;
+}

src/components/Sponsors/Sponsors.tsx → 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);

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;
+}