fix: normalize the logos of sponsors (asyncapi#3534)

hkv24 · Jan 27, 2025 · c4b12e0 · c4b12e0
1 parent a02ddc2
commit c4b12e0
Show file tree

Hide file tree

Showing 8 changed files with 36 additions and 14 deletions.
diff --git a/components/CaseStudyCard.tsx b/components/CaseStudyCard.tsx
@@ -19,11 +19,11 @@ export default function CaseStudyCard({ studies = [] }: ICaseStudyCardProps) {
   }
 
   return (
-    <div className='flex flex-wrap pt-10 lg:grid lg:grid-cols-3 lg:gap-8 lg:text-center gap-3'>
+    <div className='flex flex-wrap gap-3 pt-10 lg:grid lg:grid-cols-3 lg:gap-8 lg:text-center'>
       {studies.map((study, index) => (
         <a key={index} href={`casestudies/${study.id}`}>
           <div
-            className='max-w-sm h-full overflow-hidden min-h-[300px] rounded-md border border-gray-200 bg-white p-4'
+            className='h-full min-h-[300px] max-w-sm overflow-hidden rounded-md border border-gray-200 bg-white p-4'
             data-testid='CaseStudyCard-main'
           >
             <span className='mr-2'>

diff --git a/components/MDX/MDX.tsx b/components/MDX/MDX.tsx
@@ -37,7 +37,7 @@ import Row from '../layout/Row';
 import NewsletterSubscribe from '../NewsletterSubscribe';
 import Profiles from '../Profiles';
 import Remember from '../Remember';
-import Sponsors from '../sponsors/Sponsors';
+import Sponsors from '../sponsors/PlatinumSponsors';
 import Warning from '../Warning';
 import { Table, TableBody, TableCell, TableHeader, TableRow, Thead } from './MDXTable';
 

diff --git a/components/sponsors/GoldSponsors.tsx b/components/sponsors/GoldSponsors.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { goldSponsors } from './GoldSponsorsList';
+import SponsorImage from './SponsorImage';
 
 interface GoldSponsorsProps {
   className?: string;
@@ -26,10 +27,10 @@ export default function GoldSponsors({ className = '' }: GoldSponsorsProps): Rea
             rel='noopener noreferrer'
             data-testid='GoldSponsors-link'
           >
-            <img
-              className={sponsor.imageClass}
+            <SponsorImage
               src={sponsor.imageSrc}
               alt={sponsor.altText}
+              className={sponsor.imageClass}
               data-testid='GoldSponsors-img'
             />
           </a>

diff --git a/components/sponsors/Sponsors.tsx → components/sponsors/PlatinumSponsors.tsx b/components/sponsors/Sponsors.tsx → components/sponsors/PlatinumSponsors.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
-import { sponsors } from './SponsorsList';
+import { platinumSponsors } from './PlatinumSponsorsList';
+import SponsorImage from './SponsorImage';
 
 interface SponsorsProps {
   className: string;
@@ -13,11 +14,11 @@ interface SponsorsProps {
  * @param {string} props.className - Additional CSS classes for styling.
  * @param {boolean} props.showSupportBanner - Indicates whether support banner should be displayed.
  */
-export default function Sponsors({ className = '', showSupportBanner = true }: SponsorsProps): React.ReactNode {
+export default function PlatinumSponsors({ className = '', showSupportBanner = true }: SponsorsProps): React.ReactNode {
   return (
     <div className={`text-center ${className}`}>
       <ul className='mb-4 flex flex-wrap items-center justify-center md:px-4'>
-        {sponsors.map((sponsor, index) => (
+        {platinumSponsors.map((sponsor, index) => (
           <li key={index} className='w-2/3 sm:w-1/4 md:w-1/3 lg:w-1/5' data-testid='Sponsors-list'>
             <a
               href={sponsor.website}
@@ -26,7 +27,7 @@ export default function Sponsors({ className = '', showSupportBanner = true }: S
               rel='noopener noreferrer'
               data-testid='Sponsors-link'
             >
-              <img
+              <SponsorImage
                 className={sponsor?.imageClass}
                 src={sponsor.imageSrc}
                 alt={sponsor.altText}

diff --git a/components/sponsors/SponsorsList.ts → components/sponsors/PlatinumSponsorsList.ts b/components/sponsors/SponsorsList.ts → components/sponsors/PlatinumSponsorsList.ts
@@ -1,6 +1,6 @@
 import type { SponsorType } from '@/types/components/sponsors/SponsorType';
 
-export const sponsors: SponsorType[] = [
+export const platinumSponsors: SponsorType[] = [
   {
     name: 'Solace',
     website: 'https://www.solace.com',

diff --git a/components/sponsors/SilverSponsors.tsx b/components/sponsors/SilverSponsors.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { Silversponsors } from './SilverSponsorsList';
+import SponsorImage from './SponsorImage';
 
 interface SilverSponsorsProps {
   className: string;
@@ -26,10 +27,10 @@ export default function SilverSponsors({ className = '' }: SilverSponsorsProps):
             rel='noopener noreferrer'
             data-testid='SilverSponsors-link'
           >
-            <img
-              className={sponsor.imageClass}
+            <SponsorImage
               src={sponsor.imageSrc}
               alt={sponsor.altText}
+              className={sponsor.imageClass}
               data-testid='SilverSponsors-img'
             />
           </a>

diff --git a/components/sponsors/SponsorImage.tsx b/components/sponsors/SponsorImage.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { twMerge } from 'tailwind-merge';
+
+interface SponsorImageProps {
+  src: string;
+  alt?: string;
+  className?: string;
+}
+
+/**
+ * A component that displays sponsor logos with consistent dimensions
+ */
+export default function SponsorImage({ src, alt = 'Sponsor logo', className }: SponsorImageProps) {
+  return (
+    <div className='flex size-full items-center justify-center'>
+      <img src={src} alt={alt} className={twMerge('max-h-9 sm:max-h-12 w-auto object-contain', className)} />
+    </div>
+  );
+}
diff --git a/pages/[lang]/index.tsx b/pages/[lang]/index.tsx
@@ -21,8 +21,8 @@ import NewsletterSubscribe from '../../components/NewsletterSubscribe';
 import NewsroomSection from '../../components/newsroom/NewsroomSection';
 import Slack from '../../components/slack';
 import GoldSponsors from '../../components/sponsors/GoldSponsors';
+import PlatinumSponsors from '../../components/sponsors/PlatinumSponsors';
 import SilverSponsors from '../../components/sponsors/SilverSponsors';
-import Sponsors from '../../components/sponsors/Sponsors';
 import SupportUs from '../../components/SupportUs/SupportUs';
 import Testimonial from '../../components/Testimonial';
 import Heading from '../../components/typography/Heading';
@@ -149,7 +149,7 @@ export default function HomePage() {
             <Heading level={HeadingLevel.h3} typeStyle={HeadingTypeStyle.lg} className='mb-4'>
               {t('sponsors.platinumTitle')}
             </Heading>
-            <Sponsors className='mt-4' showSupportBanner={false} />
+            <PlatinumSponsors className='mt-4' showSupportBanner={false} />
           </Container>
 
           <Container className='pb-6 text-center' wide as='section'>