feat: migrate sponsors and support us components to typescript (async…

…api#2757) Co-authored-by: Ansh Goyal <[email protected]>
anshgoyalevil · Mar 13, 2024 · f0c2014 · f0c2014
1 parent 0fcd985
commit f0c2014
Show file tree

Hide file tree

Showing 9 changed files with 340 additions and 0 deletions.
diff --git a/components/SupportUs/SupportItemsList.ts b/components/SupportUs/SupportItemsList.ts
@@ -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
+  }
+];
diff --git a/components/SupportUs/SupportUs.tsx b/components/SupportUs/SupportUs.tsx
@@ -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>
+  );
+}
diff --git a/components/sponsors/GoldSponsors.tsx b/components/sponsors/GoldSponsors.tsx
@@ -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>
+  );
+}
diff --git a/components/sponsors/GoldSponsorsList.ts b/components/sponsors/GoldSponsorsList.ts
@@ -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'
+  }
+];
diff --git a/components/sponsors/SilverSponsors.tsx b/components/sponsors/SilverSponsors.tsx
@@ -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>
+  );
+}
diff --git a/components/sponsors/SilverSponsorsList.ts b/components/sponsors/SilverSponsorsList.ts
@@ -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'
+  }
+];
diff --git a/components/sponsors/Sponsors.tsx b/components/sponsors/Sponsors.tsx
@@ -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>
+  );
+}
diff --git a/components/sponsors/SponsorsList.ts b/components/sponsors/SponsorsList.ts
@@ -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'
+  }
+];
diff --git a/types/components/sponsors/SponsorType.d.ts b/types/components/sponsors/SponsorType.d.ts
@@ -0,0 +1,7 @@
+export interface SponsorType {
+  name: string,
+  website: string,
+  imageSrc: string,
+  altText: string,
+  imageClass: string
+}