docs: docs tiered sponsors

Author: gabrieljablonski

docs/src/components/AdsContainer/index.tsx

@@ -6,10 +6,10 @@ import './styles.css'
 
 const AdsContainer = () => {
   return (
-    <div className="fixed">
-      <BannerSponsor sponsorKey="frigade" />
-      <BannerSponsor sponsorKey="dopt" />
+    <div className="ads-container fixed">
+      <BannerSponsor sponsorKey="frigade" tier="gold" />
       <AdsContainerElement />
+      <BannerSponsor sponsorKey="dopt" tier="silver" />
     </div>
   )
 }

docs/src/components/AdsContainer/styles.css

@@ -1,3 +1,14 @@
 .fixed {
   position: fixed;
 }
+
+.ads-container {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+
+  #carbonads {
+    width: 100%;
+    max-width: 341px;
+  }
+}

docs/src/components/BannerSponsor/index.tsx

@@ -28,9 +28,10 @@ const SPONSORS = {
 
 interface BannerSponsorProps {
   sponsorKey: keyof typeof SPONSORS
+  tier: 'gold' | 'silver'
 }
 
-const BannerSponsor = ({ sponsorKey }: BannerSponsorProps) => {
+const BannerSponsor = ({ sponsorKey, tier }: BannerSponsorProps) => {
   const sponsor = SPONSORS[sponsorKey]
 
   const onClickSponsorBannerEventHandler = () => {
@@ -47,7 +48,7 @@ const BannerSponsor = ({ sponsorKey }: BannerSponsorProps) => {
   }
 
   return (
-    <div className="sponsor-banner">
+    <div className={`sponsor-banner sponsor-banner-${tier}`}>
       <a
         href={`${sponsor.href}?source=react-tooltip`}
         title={sponsor.title}

docs/src/components/BannerSponsor/styles.css

@@ -5,5 +5,17 @@
   flex-direction: column;
   min-inline-size: 130px;
   max-inline-size: calc(130px + var(--sponsor-max-char) + 8ch);
-  max-width: 377px;
+  height: fit-content;
+
+  a {
+    display: flex;
+  }
 }
+
+.sponsor-banner-gold {
+  max-width: 341px;
+}
+
+.sponsor-banner-silver {
+  max-width: 163px;
+}

docs/src/components/HomepageSponsored/index.tsx

@@ -16,6 +16,10 @@ type FeatureItem = {
   link: string
 }
 
+type SponsorItem = FeatureItem & {
+  tier: 'gold' | 'silver'
+}
+
 const FeatureList: FeatureItem[] = [
   {
     title: 'Digital Ocean',
@@ -29,18 +33,20 @@ const FeatureList: FeatureItem[] = [
   },
 ]
 
-const SponsorList: FeatureItem[] = [
+const SponsorList: SponsorItem[] = [
   {
     title: 'Frigade',
     src: require('@site/static/img/sponsors/frigade.png').default,
     link: 'https://frigade.com/?source=react-tooltip',
     eventTitle: 'frigade',
+    tier: 'gold',
   },
   {
     title: 'Dopt',
     src: require('@site/static/img/sponsors/dopt.png').default,
     link: 'https://dopt.com/?source=react-tooltip',
     eventTitle: 'dopt',
+    tier: 'silver',
   },
 ]
 
@@ -70,14 +76,17 @@ export default function HomepageSponsored(): JSX.Element {
     return true
   }
 
+  const goldSponsors = SponsorList.filter(({ tier }) => tier === 'gold')
+  const silverSponsors = SponsorList.filter(({ tier }) => tier === 'silver')
+
   return (
     <section className={styles.features}>
       <div className="container">
-        <h3 className={styles.sponsoredTitle}>Sponsored by</h3>
+        <h1 className={styles.sponsoredTitle}>Gold Sponsors 🌟</h1>
         <div className="row">
-          {SponsorList.map(({ link, title, src, eventTitle }, idx) => (
+          {goldSponsors.map(({ link, title, src, eventTitle }, idx) => (
             // eslint-disable-next-line react/no-array-index-key
-            <div key={idx} className={clsx(`col col--${12 / SponsorList.length}`)}>
+            <div key={idx} className={clsx(`col col--${12 / goldSponsors.length}`)}>
               <div className="text--center">
                 <a
                   href={link}
@@ -94,9 +103,30 @@ export default function HomepageSponsored(): JSX.Element {
             </div>
           ))}
         </div>
+        <h2 className={styles.sponsoredTitle}>Silver Sponsors ✪</h2>
+        <div className="row">
+          {silverSponsors.map(({ link, title, src, eventTitle }, idx) => (
+            // eslint-disable-next-line react/no-array-index-key
+            <div key={idx} className={clsx(`col col--${12 / silverSponsors.length}`)}>
+              <div className="text--center">
+                <a
+                  href={link}
+                  title={title}
+                  target="_blank"
+                  rel="noreferrer"
+                  onClick={() => {
+                    onClickSponsorBannerEventHandler(eventTitle)
+                  }}
+                >
+                  <img src={src} alt={title} width={200} />
+                </a>
+              </div>
+            </div>
+          ))}
+        </div>
       </div>
       <div className="container">
-        <h3 className={styles.sponsoredTitle}>Powered by</h3>
+        <h1 className={styles.sponsoredTitle}>Powered by</h1>
         <div className="row">
           {FeatureList.map((props, idx) => (
             // eslint-disable-next-line react/no-array-index-key

docs/src/components/HomepageSponsored/styles.module.css

@@ -1,6 +1,7 @@
 .features {
   display: flex;
   flex-direction: column;
+  gap: 25px;
 }
 
 .featureSvg {
@@ -9,7 +10,6 @@
 }
 
 .sponsoredTitle {
-  font-size: xx-large;
   display: flex;
   justify-content: center;
 }