Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: normalized logos of sponsors #3169

Closed
wants to merge 5 commits into from
+49 −11
Closed

fix: normalized logos of sponsors #3169

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e08d7f6
Normalized logos of sponsors
Wck-iipi Aug 28, 2024
f537df6
Added twmerge for ResponsiveImage
Wck-iipi Sep 9, 2024
fa4eae3
alt made compulsory to add in ResponsiveImage
Wck-iipi Oct 16, 2024
9008f6c
Merge branch 'master' into 3158Fix
Wck-iipi Oct 16, 2024
3d62190
Merge branch 'master' into 3158Fix
asyncapi-bot Dec 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions components/sponsors/GoldSponsors.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { goldSponsors } from './GoldSponsorsList';
import ResponsiveImage from './ResponsiveImage';

interface GoldSponsorsProps {
className?: string;
Expand All @@ -24,11 +25,11 @@ export default function GoldSponsors({ className = '' }: GoldSponsorsProps): Rea
rel='noopener noreferrer'
data-testid='GoldSponsors-link'
>
<img
className={sponsor.imageClass}
<ResponsiveImage
src={sponsor.imageSrc}
alt={sponsor.altText}
data-testid='GoldSponsors-img'
className={sponsor.imageClass}
dataTestId='GoldSponsors-img'
/>
</a>
))}
Expand Down
25 changes: 25 additions & 0 deletions components/sponsors/ResponsiveImage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import React from 'react';
import { twMerge } from 'tailwind-merge';

interface ResponsiveImageProps {
src: string;
alt?: string;
className?: string;
dataTestId: string;
}
Wck-iipi marked this conversation as resolved.
Show resolved Hide resolved

/*
* 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<ResponsiveImageProps> = ({ src, alt, className, dataTestId }) => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why to create separate component for Responsive images? We can add this property to component of respective category.

Copy link
Author

@Wck-iipi Wck-iipi Aug 29, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

HDI logo size is way too huge as compared to others, so probably we have to built a component that restricts the logo size with fixed dimension.

I thought that creating a component was required? Do you want me to do this without writing a new component or with?

const classNameMerged = twMerge('w-full h-12 object-contain', className);

return <img src={src} alt={alt} className={`${classNameMerged}`} data-testid={dataTestId} />;
};

export default ResponsiveImage;
7 changes: 4 additions & 3 deletions components/sponsors/SilverSponsors.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import ResponsiveImage from './ResponsiveImage';
import { Silversponsors } from './SilverSponsorsList';

interface SilverSponsorsProps {
Expand All @@ -24,11 +25,11 @@ export default function SilverSponsors({ className = '' }: SilverSponsorsProps):
rel='noopener noreferrer'
data-testid='SilverSponsors-link'
>
<img
className={sponsor.imageClass}
<ResponsiveImage
src={sponsor.imageSrc}
alt={sponsor.altText}
data-testid='SilverSponsors-img'
className={sponsor.imageClass}
dataTestId='SilverSponsors-img'
/>
</a>
))}
Expand Down
7 changes: 4 additions & 3 deletions components/sponsors/Sponsors.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import ResponsiveImage from './ResponsiveImage';
import { sponsors } from './SponsorsList';

interface SponsorsProps {
Expand All @@ -24,11 +25,11 @@ export default function Sponsors({ className = '', showSupportBanner = true }: S
rel='noopener noreferrer'
data-testid='Sponsors-link'
>
<img
className={sponsor?.imageClass}
<ResponsiveImage
src={sponsor.imageSrc}
alt={sponsor.altText}
data-testid='Sponsors-img'
className={sponsor?.imageClass}
dataTestId='Sponsors-img'
/>
</a>
</li>
Expand Down
Loading