diff --git a/components/sponsors/GoldSponsors.tsx b/components/sponsors/GoldSponsors.tsx index 3729ffcc7e0..94b2bb41c98 100644 --- a/components/sponsors/GoldSponsors.tsx +++ b/components/sponsors/GoldSponsors.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { goldSponsors } from './GoldSponsorsList'; +import ResponsiveImage from './ResponsiveImage'; interface GoldSponsorsProps { className?: string; @@ -26,11 +27,11 @@ export default function GoldSponsors({ className = '' }: GoldSponsorsProps): Rea rel='noopener noreferrer' data-testid='GoldSponsors-link' > - {sponsor.altText} ))} diff --git a/components/sponsors/ResponsiveImage.tsx b/components/sponsors/ResponsiveImage.tsx new file mode 100644 index 00000000000..e5d20657cb4 --- /dev/null +++ b/components/sponsors/ResponsiveImage.tsx @@ -0,0 +1,37 @@ +import React from 'react'; +import { twMerge } from 'tailwind-merge'; + +interface ResponsiveImageProps { + src: string; + alt: string; + className?: string; + dataTestId: string; +} + +/* + * This component displays the responsive image of the sponsors. + * @param {ResponsiveImageProps} props - The props for ResponsiveImage component. + * @param {string} props.src - Source of the image displayed. + * @param {string} props.alt - Alternative text for the image, important for accessibility. + * @param {string} props.className - Additional CSS class names for styling the image. + * @param {string} props.dataTestId - A string for identifying the element during testing. + */ +const ResponsiveImage: React.FC = ({ + src, + alt, + className, + dataTestId, +}) => { + const classNameMerged = twMerge('w-full h-12 object-contain', className); + + return ( + {alt} + ); +}; + +export default ResponsiveImage; diff --git a/components/sponsors/SilverSponsors.tsx b/components/sponsors/SilverSponsors.tsx index 4a737aef7df..8a223fda18e 100644 --- a/components/sponsors/SilverSponsors.tsx +++ b/components/sponsors/SilverSponsors.tsx @@ -1,5 +1,5 @@ +import ResponsiveImage from './ResponsiveImage'; import React from 'react'; - import { Silversponsors } from './SilverSponsorsList'; interface SilverSponsorsProps { @@ -26,11 +26,11 @@ export default function SilverSponsors({ className = '' }: SilverSponsorsProps): rel='noopener noreferrer' data-testid='SilverSponsors-link' > - {sponsor.altText} ))} diff --git a/components/sponsors/Sponsors.tsx b/components/sponsors/Sponsors.tsx index fd5aff75117..fe0041814c8 100644 --- a/components/sponsors/Sponsors.tsx +++ b/components/sponsors/Sponsors.tsx @@ -1,5 +1,5 @@ +import ResponsiveImage from './ResponsiveImage'; import React from 'react'; - import { sponsors } from './SponsorsList'; interface SponsorsProps { @@ -26,11 +26,11 @@ export default function Sponsors({ className = '', showSupportBanner = true }: S rel='noopener noreferrer' data-testid='Sponsors-link' > - {sponsor.altText}