forked from asyncapi/website
-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: migrate sponsors and support us components to typescript (async…
…api#2757) Co-authored-by: Ansh Goyal <[email protected]>
- Loading branch information
1 parent
0fcd985
commit f0c2014
Showing
9 changed files
with
340 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,59 @@ | ||
interface ISupportItemType { | ||
href: string; | ||
imgSrc: string; | ||
imgTitle: string; | ||
imgClass: string; | ||
section: number; | ||
}; | ||
|
||
export const items : ISupportItemType[] = [ | ||
{ | ||
href: 'https://slack.com/media-kit', | ||
imgSrc: '/img/supportus/slack.webp', | ||
imgTitle: 'Slack - Free Standard Subscription.', | ||
imgClass: 'inline-block px-4 sm:h-10', | ||
section: 1 | ||
}, | ||
{ | ||
href: 'https://toast.ninja/', | ||
imgSrc: '/img/supportus/toast.webp', | ||
imgTitle: 'Toast - Free services.', | ||
imgClass: 'inline-block px-4 sm:h-10', | ||
section: 1 | ||
}, | ||
{ | ||
href: 'https://www.netlify.com/', | ||
imgSrc: '/img/supportus/netlify.webp', | ||
imgTitle: 'Netlify - Free website deployment.', | ||
imgClass: 'inline-block px-4 sm:h-10', | ||
section: 1 | ||
}, | ||
{ | ||
href: 'https://sonarcloud.io/', | ||
imgSrc: '/img/supportus/sonarcloud.webp', | ||
imgTitle: 'Sonarcloud - Free tier for automated project scanning.', | ||
imgClass: 'inline-block px-4 md:h-14', | ||
section: 2 | ||
}, | ||
{ | ||
href: 'https://www.digitalocean.com/press/', | ||
imgSrc: '/img/supportus/digitalocean.webp', | ||
imgTitle: 'DigitalOcean - 500 dollars on cloud services.', | ||
imgClass: 'inline-block px-2 sm:h-8', | ||
section: 2 | ||
}, | ||
{ | ||
href: 'https://restream.io/', | ||
imgSrc: '/img/supportus/restream.webp', | ||
imgTitle: 'Restream - Free professional plan subscription.', | ||
imgClass: 'inline-block px-4 sm:h-6', | ||
section: 2 | ||
}, | ||
{ | ||
href: 'https://sessionize.com/', | ||
imgSrc: '/img/supportus/sessionize.webp', | ||
imgTitle: 'Sessionize-Free community license for AACoT Madrid.', | ||
imgClass: 'inline-block px-4 sm:h-9', | ||
section: 3 | ||
} | ||
]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,81 @@ | ||
import { items } from './SupportItemsList'; | ||
|
||
interface SupportUsProps { | ||
className?: string; | ||
showSupportBanner?: boolean; | ||
}; | ||
|
||
/** | ||
* @description This component displays support items. | ||
* @param {SupportUsProps} props - The props for SupportUs component. | ||
* @param {string} props.className - Additional CSS classes for styling. | ||
* @param {boolean} props.showSupportBanner - Indicates whether support banner should be displayed. | ||
*/ | ||
export default function SupportUs({ | ||
className = '' | ||
} : SupportUsProps): React.ReactNode { | ||
return ( | ||
<div className={ `text-center ${ className }` } data-testid='SupportUs-main'> | ||
<div className='flex flex-wrap items-center justify-center sm:py-2 md:mb-4 md:px-4' data-testid='SupportUs-section'> | ||
{ items | ||
.filter((item) => item.section === 1) | ||
.map((item, index) => ( | ||
<a | ||
key={ index } | ||
href={ item.href } | ||
target='_blank' | ||
rel='noopener noreferrer' | ||
className='relative block w-2/3 p-4 text-center sm:w-1/3 sm:p-0 md:w-1/3 lg:w-1/5' | ||
> | ||
<img | ||
className={ item.imgClass } | ||
src={ item.imgSrc } | ||
title={ item.imgTitle } | ||
alt={item.imgTitle} | ||
/> | ||
</a> | ||
)) } | ||
</div> | ||
<div className='mb-4 flex flex-wrap items-center justify-center md:px-2' data-testid='SupportUs-subsection'> | ||
{ items | ||
.filter((item) => item.section === 2) | ||
.map((item, index) => ( | ||
<a | ||
key={ index } | ||
href={ item.href } | ||
target='_blank' | ||
rel='noopener noreferrer' | ||
className='relative block w-2/3 p-4 text-center sm:w-1/3 sm:p-0 md:w-1/3 lg:w-1/5' | ||
> | ||
<img | ||
className={ item.imgClass } | ||
src={ item.imgSrc } | ||
title={ item.imgTitle } | ||
alt={item.imgTitle} | ||
/> | ||
</a> | ||
)) } | ||
</div> | ||
<div className='mb-4 flex flex-wrap items-center justify-center md:px-2' data-testid='SupportUs-last-div'> | ||
{ items | ||
.filter((item) => item.section === 3) | ||
.map((item, index) => ( | ||
<a | ||
key={ index } | ||
href={ item.href } | ||
target='_blank' | ||
rel='noopener noreferrer' | ||
className='relative block w-2/3 p-4 text-center sm:w-1/3 sm:p-0 md:w-1/3 lg:w-1/5' | ||
> | ||
<img | ||
className={ item.imgClass } | ||
src={ item.imgSrc } | ||
title={ item.imgTitle } | ||
alt={item.imgTitle} | ||
/> | ||
</a> | ||
)) } | ||
</div> | ||
</div> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,40 @@ | ||
import { goldSponsors } from './GoldSponsorsList'; | ||
|
||
interface GoldSponsorsProps { | ||
className?: string; | ||
showSupportBanner?: boolean; | ||
}; | ||
|
||
/** | ||
* @description This component displays Gold Sponsors. | ||
* @param {GoldSponsorsProps} props - The props for GoldSponsors component. | ||
* @param {string} props.className - Additional CSS classes for styling. | ||
* @param {boolean} props.showSupportBanner - Indicates whether support banner should be displayed. | ||
*/ | ||
export default function GoldSponsors({ | ||
className = '' | ||
}: GoldSponsorsProps): React.ReactNode { | ||
return ( | ||
<div className={`text-center ${className}`}> | ||
<div className='mb-8 flex flex-wrap items-center justify-center md:px-4'> | ||
{goldSponsors.map((sponsor, index) => ( | ||
<a | ||
key={index} | ||
href={sponsor.website} | ||
target='_blank' | ||
className='relative block w-2/3 p-4 text-center sm:w-1/2 sm:p-0 md:w-1/3 lg:w-1/5' | ||
rel='noopener noreferrer' | ||
data-testid='GoldSponsors-link' | ||
> | ||
<img | ||
className={sponsor.imageClass} | ||
src={sponsor.imageSrc} | ||
alt={sponsor.altText} | ||
data-testid='GoldSponsors-img' | ||
/> | ||
</a> | ||
))} | ||
</div> | ||
</div> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
import type { SponsorType } from '@/types/components/sponsors/SponsorType'; | ||
|
||
export const goldSponsors: SponsorType[] = [ | ||
{ | ||
name: 'Postman', | ||
website: 'https://www.postman.com', | ||
imageSrc: '/img/sponsors/postman.png', | ||
altText: 'Postman', | ||
imageClass: 'inline-block px-4 sm:h-18' | ||
} | ||
]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,40 @@ | ||
import { Silversponsors } from './SilverSponsorsList'; | ||
|
||
interface SilverSponsorsProps { | ||
className: string; | ||
showSupportBanner: boolean; | ||
}; | ||
|
||
/** | ||
* This component displays Silver Sponsors. | ||
* @param {SilverSponsorsProps} props - The props for SilverSponsors component. | ||
* @param {string} props.className - Additional CSS classes for styling. | ||
* @param {boolean} props.showSupportBanner - Indicates whether support banner should be displayed. | ||
*/ | ||
export default function SilverSponsors({ | ||
className = '' | ||
}: SilverSponsorsProps): React.ReactNode { | ||
return ( | ||
<div className={`text-center ${className}`}> | ||
<div className='mb-8 flex flex-wrap items-center justify-center md:px-4'> | ||
{Silversponsors.map((sponsor, index) => ( | ||
<a | ||
key={index} | ||
href={sponsor.website} | ||
target='_blank' | ||
className='relative block w-2/3 p-4 text-center sm:w-1/2 sm:p-0 md:w-1/3 lg:w-1/5' | ||
rel='noopener noreferrer' | ||
data-testid='SilverSponsors-link' | ||
> | ||
<img | ||
className={sponsor.imageClass} | ||
src={sponsor.imageSrc} | ||
alt={sponsor.altText} | ||
data-testid='SilverSponsors-img' | ||
/> | ||
</a> | ||
))} | ||
</div> | ||
</div> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
import type { SponsorType } from '@/types/components/sponsors/SponsorType'; | ||
|
||
export const Silversponsors : SponsorType[] = [ | ||
{ | ||
name: 'Bump.sh', | ||
website: 'https://bump.sh/asyncapi?utm_source=asyncapi&utm_medium=referral&utm_campaign=sponsor', | ||
altText: 'Bump', | ||
imageSrc: '/img/sponsors/bumpsh.svg', | ||
imageClass: 'inline-block sm:h-9' | ||
}, | ||
{ | ||
name: 'Svix', | ||
website: 'https://www.svix.com/', | ||
altText: 'Svix', | ||
imageSrc: '/img/sponsors/svix_logo.svg', | ||
imageClass: 'inline-block sm:h-9' | ||
}, | ||
{ | ||
name: 'HiveMQ', | ||
website: 'https://www.hivemq.com/', | ||
altText: 'HiveMQ', | ||
imageSrc: '/img/sponsors/hivemq_logo.png', | ||
imageClass: 'inline-block sm:h-9' | ||
} | ||
]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,59 @@ | ||
import { sponsors } from './SponsorsList'; | ||
|
||
interface SponsorsProps { | ||
className: string; | ||
showSupportBanner: boolean; | ||
}; | ||
|
||
/** | ||
* This component displays Silver Sponsors. | ||
* @param {SponsorsProps} props - The props for Sponsors component. | ||
* @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 { | ||
return ( | ||
<div className={`text-center ${className}`}> | ||
<ul className='mb-4 flex flex-wrap items-center justify-center md:px-4'> | ||
{sponsors.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} | ||
target='_blank' | ||
className='relative block p-4 text-center sm:p-0' | ||
rel='noopener noreferrer' | ||
data-testid='Sponsors-link' | ||
> | ||
<img | ||
className={sponsor?.imageClass} | ||
src={sponsor.imageSrc} | ||
alt={sponsor.altText} | ||
data-testid='Sponsors-img' | ||
/> | ||
</a> | ||
</li> | ||
))} | ||
</ul> | ||
{showSupportBanner && ( | ||
<div className='md:px-4'> | ||
<span className='text-gray-500'>Want to become a sponsor?</span>{' '} | ||
<a | ||
href='https://opencollective.com/asyncapi' | ||
target='_blank' | ||
rel='noopener noreferrer' | ||
className='text-primary-600' | ||
> | ||
Support us! | ||
</a> | ||
</div> | ||
)} | ||
</div> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
import type { SponsorType } from '@/types/components/sponsors/SponsorType'; | ||
|
||
export const sponsors : SponsorType[] = [ | ||
{ | ||
name: 'IBM', | ||
website: 'https://www.ibm.com', | ||
imageSrc: '/img/sponsors/ibm.png', | ||
altText: 'IBM', | ||
imageClass: 'inline-block px-4 sm:h-14' | ||
}, | ||
{ | ||
name: 'Solace', | ||
website: 'https://www.solace.com', | ||
imageSrc: '/img/sponsors/solace.png', | ||
altText: 'Solace', | ||
imageClass: 'inline-block px-4 sm:h-12' | ||
} | ||
]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
export interface SponsorType { | ||
name: string, | ||
website: string, | ||
imageSrc: string, | ||
altText: string, | ||
imageClass: string | ||
} |