feat: migrate community components to typescript

components/community/Card.tsx

@@ -0,0 +1,113 @@
+import Link from 'next/link';
+import React from 'react';
+
+import { CardType } from '@/types/components/community/CardPropsType';
+import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading';
+import { ParagraphTypeStyle } from '@/types/typography/Paragraph';
+
+import IconArrowUp from '../icons/ArrowUp';
+import Heading from '../typography/Heading';
+import Paragraph from '../typography/Paragraph';
+
+interface CardProps {
+  icon: string;
+  tagline: string;
+  taglineBg: string;
+  type?: CardType;
+  heading: string;
+  description: string;
+  bg: string;
+  btnText: string;
+  btnBg: string;
+  link: string;
+};
+
+/**
+ * @description This component displays Small Home Card.
+ * @param {string} props.icon - The icon for the card.
+ * @param {string} props.tagline - The tagline for the card.
+ * @param {string} props.taglineBg - The background color for the tagline.
+ * @param {CardType} props.type - The type of the card (either 'small' or 'large').
+ * @param {string} props.heading - The heading for the card.
+ * @param {string} props.description - The description for the card.
+ * @param {string} props.bg - The background color for the card.
+ * @param {string} props.btnText - The text for the button.
+ * @param {string} props.btnBg - The background color for the button.
+ * @param {string} props.link - The link for the button.
+ */
+export default function Card({
+  icon,
+  tagline,
+  taglineBg,
+  type = CardType.LARGE,
+  heading,
+  description,
+  bg,
+  btnText,
+  btnBg,
+  link
+}: CardProps) {
+  if (type === CardType.SMALL) {
+    return (
+      <Link href={link} target={link.includes('http') ? '_blank' : undefined}>
+        <div
+          className={`w-full cursor-pointer rounded border border-[#ad20e2] p-3 shadow-xl ${bg}`}
+          data-testid='Card-small-bg'>
+          <div className='flex w-min justify-between rounded-xl bg-gray-100 p-2 text-center text-xs'>
+            <span>{icon}</span> <span className='ml-[5px]'>{tagline}</span>
+          </div>
+          <div className='mt-3' data-testid='Card-heading'>
+            <Heading level={HeadingLevel.h1} typeStyle={HeadingTypeStyle.md}>
+              {heading}
+            </Heading>
+          </div>
+          <div className='mt-2' data-testid='Card-desc'>
+            <Paragraph
+              textColor={bg ? 'text-black' : 'text-gray-600'}
+              typeStyle={ParagraphTypeStyle.sm}
+            >
+              {description}
+            </Paragraph>
+          </div>
+          <div className='flex w-full justify-end text-right' data-testid='Card-icon'>
+            <IconArrowUp className='w-[20px]' />
+          </div>
+        </div>
+      </Link>
+    );
+  }
+
+  return (
+    <div
+      className={`h-140 w-full rounded border p-6 shadow-xl ${!bg && 'border-[#ad20e2]'
+      } ${bg}`}
+      data-testid='Card-lg-bg'>
+      <div
+        className={`flex w-min justify-between rounded-xl p-2 text-center text-xs ${taglineBg}`}
+        data-testid='Card-lg-tagline'>
+        <span>{icon}</span> <span className='ml-[5px]'>{tagline}</span>
+      </div>
+
+      <div className='mt-10' data-testid='Card-heading-lg'>
+        <Heading
+          level={HeadingLevel.h1}
+          typeStyle={HeadingTypeStyle.lg}
+          textColor={bg && 'text-white'}
+        >
+          {heading}
+        </Heading>
+      </div>
+      <div className='mt-6' data-testid='Card-desc-lg'>
+        <Paragraph textColor={bg && 'text-gray-400'}>{description}</Paragraph>
+      </div>
+      <div className='mt-10'>
+        <Link href={link} data-testid='Card-link-lg'>
+          <div className={`flex ${btnBg} cursor-pointer`}>
+            <IconArrowUp className={`w-[20px] ${btnBg}`} />{' '}
+            <span className='ml-2 text-sm'>{btnText}</span>
+          </div>
+        </Link>
+      </div>
+    </div>
+  );
+};

components/community/Header.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+
+import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading';
+
+import Button from '../buttons/Button';
+import IconRocket from '../icons/Rocket';
+import Heading from '../typography/Heading';
+
+interface HeaderProps {
+  className?: string;
+};
+
+/**
+ * @description This component displays Header.
+ * @param {HeaderProps} props - The props for Header component.
+ * @param {string} props.className - Additional CSS classes for styling.
+ */
+export default function Header({
+  className = ''
+}: HeaderProps) {
+  return (
+    <div className={`md:mt-0' data-testid='Header-hero-heading mt-10 flex flex-col items-center justify-center text-center ${className}`}>
+      <Heading
+        className='countdown-text-gradient font-bold'
+        level={HeadingLevel.h6}
+        typeStyle={HeadingTypeStyle.xs}
+      >
+        AsyncAPI Community
+      </Heading>
+      <div className='mt-10' data-testid='Header-heading-1'>
+        <Heading level={HeadingLevel.h1} typeStyle={HeadingTypeStyle.xl} className=''>
+          <span className='title block leading-[3rem] md:-mt-1'>
+            Welcome to the
+            <br /> AsyncAPI Community
+          </span>
+        </Heading>
+      </div>
+      <div className='mt-5 w-5/6' data-testid='Header-heading-2'>
+        <Heading
+          level={HeadingLevel.h2}
+          typeStyle={HeadingTypeStyle.bodyMd}
+          textColor='text-gray-700'
+          className='text-sm text-slate-500'
+
+        >
+          We&apos;re an OSS community that&apos;s passionate about AsyncAPI. Join us in
+          building the future of Event Driven APIs by asking questions,
+          sharing ideas, and building connections.
+        </Heading>
+      </div>
+      <div className='mt-10'>
+        <Button
+          className='block focus:outline-none md:inline-block'
+          text='AsyncAPI Discussions'
+          href='https://github.com/orgs/asyncapi/discussions'
+          target='_blank'
+          icon={<IconRocket className='-mb-1 ml-1 size-5' data-testid='Header-IconRocket' />}
+        />
+      </div>
+    </div>
+  );
+};

components/community/Hero.tsx

@@ -0,0 +1,48 @@
+import orbitData from '../../config/orbitData.json';
+import Header from './Header';
+
+interface HeroProps {
+  className?: string;
+};
+
+/**
+ * @description This component displays Hero Section.
+ * @param {HeroProps} props - The props for Hero component.
+ * @param {string} props.className - Additional CSS classes for styling.
+ */
+export default function Hero({
+  className = ''
+}: HeroProps) {
+  return (
+    <>
+      <div className={`orbits overflow-hidden ${className}`}>
+        <div className='orbit-container' data-testid='orbit-div'>
+          <div id='first-orbit' className='orbit' data-testid='Hero-first'>
+            {orbitData[0].map((orbit) => (
+              <div key={orbit.id} className={orbit.id}>
+                <img src={orbit.img} alt={orbit.alt} className='orbit-img' data-testid='Hero-firstimg' />
+              </div>
+            ))}
+            <div className='absolute z-40 flex size-full justify-center'>
+              <Header />
+            </div>
+          </div>
+          <div id='second-orbit' className='orbit' data-testid='Hero-second'>
+            {orbitData[1].map((orbit) => (
+              <div key={orbit.id} className={orbit.id}>
+                <img src={orbit.img} alt={orbit.alt} data-testid='Hero-secondimg' />
+              </div>
+            ))}
+          </div>
+          <div id='third-orbit' className='orbit' data-testid='Hero-third'>
+            {orbitData[2].map((orbit) => (
+              <div key={orbit.id} className={orbit.id}>
+                <img src={orbit.img} alt={orbit.alt} data-testid='Hero-thirdimg' />
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};

components/community/HomeCard.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+
+import { ButtonSize } from '@/types/components/buttons/ButtonPropsType';
+import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading';
+
+import Button from '../buttons/Button';
+import Heading from '../typography/Heading';
+
+interface HomeCardProps {
+  headline: string;
+  title: string;
+  description: string;
+  btnText: string;
+  link: string;
+  className: string;
+};
+
+/**
+ * @description This component displays Home Card.
+ * @param {HomeCardProps} props - The props for Home Card component.
+ * @param {string} props.headline - The headline for the home card.
+ * @param {string} props.title - The title for the home card.
+ * @param {string} props.description - The description for the home card.
+ * @param {string} props.btnText - The text for the button in the home card.
+ * @param {string} props.link - The link for the button in the home card.
+ * @param {string} props.className - Additional CSS classes for styling..
+ */
+export default function HomeCards({
+  headline,
+  title,
+  description,
+  btnText,
+  link,
+  className
+} : HomeCardProps) {
+  return (
+    <div className='z-40 mt-20 w-full rounded-lg bg-white shadow-xl md:flex md:h-130 md:justify-between'>
+      <div className='flex h-auto w-full flex-col justify-between p-10 text-center md:w-2/5 md:text-left'>
+        <div  data-testid='HomeCard-main'>
+          <Heading
+            level={HeadingLevel.h2}
+            typeStyle={HeadingTypeStyle.md}
+            textColor='text-purple-300'
+          >
+            {headline}
+          </Heading>
+        </div>
+        <div data-testid='HomeCard-title'>
+          <Heading level={HeadingLevel.h2} typeStyle={HeadingTypeStyle.lg} className='mt-10' >
+            {title}
+          </Heading>
+          <Heading
+            level={HeadingLevel.h2}
+            typeStyle={HeadingTypeStyle.bodyLg}
+            textColor='text-gray-700'
+            className='mt-10 text-sm text-slate-500'
+          >
+            {description}
+          </Heading>
+          <div className='mt-10' data-testid='HomeCard-button'>
+            <Button text={btnText} buttonSize={ButtonSize.DEFAULT} href={link} />
+          </div>
+        </div>
+      </div>
+      <div
+        className={`h-fit-content flex w-full justify-end rounded-r-lg bg-cover bg-center md:w-3/6 ${className}`}
+      />
+    </div>
+  );
+};

types/components/community/CardPropsType.ts

@@ -0,0 +1,4 @@
+export enum CardType {
+  SMALL = 'small',
+  LARGE = 'large',
+}