fix exports and prop interface names

.eslintrc

@@ -22,7 +22,14 @@
         "endOfLine": "auto"
       }
     ],
-    "max-len": 0
+    "max-len": [
+      "error",
+      {
+        "code": 120,
+        "ignoreUrls": true,
+        "ignorePattern": "*className=([\\s\\S]*?)*" // Ignore classnames
+      }
+    ]
   },
   "globals": {
     "React": true,

components/AuthorAvatars.tsx

@@ -10,7 +10,12 @@ interface AuthorAvatarsProps {
   authors: Author[];
 }
 
-const AuthorAvatars: React.FC<AuthorAvatarsProps> = ({ authors = [] }) => {
+/**
+ * @description This component takes an array of authors and renders their avatars.
+ * @param {AuthorAvatarsProps} props - The component props.
+ * @param {Author[]} props.authors - The authors to render avatars for.
+ */
+export default function AuthorAvatars({ authors = [] }: AuthorAvatarsProps) {
   return (
     <>
       {authors.map((author, index) => {
@@ -36,6 +41,4 @@ const AuthorAvatars: React.FC<AuthorAvatarsProps> = ({ authors = [] }) => {
       })}
     </>
   );
-};
-
-export default AuthorAvatars;
+}

components/navigation/BlogPostItem.tsx

@@ -4,52 +4,44 @@ import type { Ref } from 'react';
 import { forwardRef } from 'react';
 import TextTruncate from 'react-text-truncate';
 
+import { BlogPostType } from '@/types/components/navigation/BlogPostType';
+import type { IBlogPost } from '@/types/post';
 import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading';
 import { ParagraphTypeStyle } from '@/types/typography/Paragraph';
 
 import AuthorAvatars from '../AuthorAvatars';
 import Heading from '../typography/Heading';
 import Paragraph from '../typography/Paragraph';
 
-interface Author {
-  name: string;
-  photo: string;
-  link?: string;
-}
-
-interface Post {
-  type: string;
-  alt?: string;
-  slug: string;
-  cover: string;
-  title: string;
-  excerpt: string;
-  authors: Author[];
-  date: string;
-  readingTime: number;
-}
-
-interface Props {
-  post: Post;
+interface BlogPostItemProps {
+  post: IBlogPost;
   className?: string;
   id?: string;
 }
 
-const BlogPostItem = forwardRef(function BlogPostItem({ post, className = '', id = '' }: Props,
+/**
+ * @description Functional component representing a single blog post item.
+ * @param {Object} props - Props for the BlogPostItem component.
+ * @param {IBlogPost} props.post - The blog post data.
+ * @param {string} [props.className=''] - Additional CSS classes for styling.
+ * @param {string} [props.id=''] - The HTML id attribute for the component.
+ * @param {Ref<HTMLLIElement>} ref - Reference object for the component.
+ */
+export default forwardRef(function BlogPostItem({ post, className = '', id = '' }: BlogPostItemProps,
   ref: Ref<HTMLLIElement>) {
   let typeColors: [string, string] = ['bg-indigo-100', 'text-indigo-800'];
 
   switch (post.type.toLowerCase()) {
-    case 'video':
+    case BlogPostType.Video:
       typeColors = ['bg-pink-100', 'text-pink-800'];
       break;
-    case 'marketing':
+    case BlogPostType.Marketing:
       typeColors = ['bg-orange-100', 'text-orange-800'];
       break;
-    case 'strategy':
+    case BlogPostType.Strategy:
       typeColors = ['bg-green-100', 'text-green-800'];
       break;
-    case 'communication':
+    case BlogPostType.Communication:
       typeColors = ['bg-teal-100', 'text-teal-800'];
       break;
     default:
@@ -133,5 +125,3 @@ const BlogPostItem = forwardRef(function BlogPostItem({ post, className = '', id
     </li>
   );
 });
-
-export default BlogPostItem;

components/newsroom/FeaturedBlogPost.tsx

@@ -2,52 +2,39 @@ import moment from 'moment';
 import Link from 'next/link';
 import TextTruncate from 'react-text-truncate';
 
+import { BlogPostType } from '@/types/components/navigation/BlogPostType';
+import type { IBlogPost } from '@/types/post';
 import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading';
 import { ParagraphTypeStyle } from '@/types/typography/Paragraph';
 
 import AuthorAvatars from '../AuthorAvatars';
 import Heading from '../typography/Heading';
 import Paragraph from '../typography/Paragraph';
 
-interface Author {
-    name: string;
-    photo: string;
-    link?: string;
-  }
-
 interface FeaturedBlogPostProps {
-  post: {
-    type: string;
-    slug: string;
-    cover: string;
-    title: string;
-    excerpt: string;
-    authors: Author[];
-    date: string;
-    readingTime: number;
-  };
+  post: IBlogPost;
   className?: string;
 }
 
 /**
- * React component for rendering a featured blog post.
+ * @description Renders a featured blog post with the provided data.
  * @param {FeaturedBlogPostProps} props - The component props.
- * @returns {JSX.Element} JSX element representing the featured blog post.
+ * @param {string} [props.className=''] - Additional CSS classes for styling.
  */
 export default function FeaturedBlogPost({ post, className = '' }: FeaturedBlogPostProps) {
   let typeColors = ['bg-indigo-100', 'text-indigo-800'];
 
   switch (post.type.toLowerCase()) {
-    case 'video':
+    case BlogPostType.Video:
       typeColors = ['bg-pink-100', 'text-pink-800'];
       break;
-    case 'marketing':
+    case BlogPostType.Marketing:
       typeColors = ['bg-orange-100', 'text-orange-800'];
       break;
-    case 'strategy':
+    case BlogPostType.Strategy:
       typeColors = ['bg-green-100', 'text-green-800'];
       break;
-    case 'communication':
+    case BlogPostType.Communication:
       typeColors = ['bg-teal-100', 'text-teal-800'];
       break;
     default:

components/newsroom/Newsroom.tsx

@@ -12,17 +12,13 @@ import NewsroomBlogPosts from './NewsroomBlogPosts';
 import NewsroomYoutube from './NewsroomYoutube';
 
 /**
- * A component representing the newsroom section of AsyncAPI website.
- * @returns {JSX.Element} The JSX element representing the newsroom section.
+ * @description This component displays the latest updates, blog posts, news, and videos.
  */
 export default function Newsroom() {
   return (
     <>
       <div className='mt-12 text-center' data-testid='Newsroom-main'>
-        <Heading
-          level={HeadingLevel.h2}
-          typeStyle={HeadingTypeStyle.lg}
-        >
+        <Heading level={HeadingLevel.h2} typeStyle={HeadingTypeStyle.lg}>
           Latest Updates
         </Heading>
         <Paragraph typeStyle={ParagraphTypeStyle.md} className='mx-auto mt-5 max-w-2xl'>
@@ -81,11 +77,7 @@ export default function Newsroom() {
           </div>
           <div className='w-full px-2 md:w-1/2 md:pl-4 md:pr-0'>
             <div className='mx-auto mt-8 w-full rounded-xl shadow-md md:mt-0' data-testid='Newsroom-Twitter'>
-              <TwitterTimelineEmbed
-                sourceType='profile'
-                screenName='AsyncAPISpec'
-                options={{ tweetLimit: '2' }}
-              />
+              <TwitterTimelineEmbed sourceType='profile' screenName='AsyncAPISpec' options={{ tweetLimit: '2' }} />
             </div>
           </div>
         </div>

components/newsroom/NewsroomArticle.tsx

@@ -14,10 +14,9 @@ interface Article {
 }
 
 /**
- * Represents an article in the newsroom section.
- * @returns {JSX.Element} The JSX element representing the newsroom article.
+ * @description This component renders an article in the newsroom section.
  */
-const NewsroomArticle: React.FC = () => {
+export default function NewsroomArticl() {
   return (
     <ul className='flex w-full flex-col gap-2 px-2 pb-4'>
       {articlesData.map((article: Article, index: number) => (
@@ -42,6 +41,4 @@ const NewsroomArticle: React.FC = () => {
       ))}
     </ul>
   );
-};
-
-export default NewsroomArticle;
+}

components/newsroom/NewsroomBlogPosts.tsx

@@ -9,8 +9,7 @@ import BlogPostItem from '../navigation/BlogPostItem';
 import { checkLastSnapIndex, useSwiperRef } from './swiper';
 
 /**
- * React component for displaying blog posts in a newsroom.
- * @returns {JSX.Element} JSX element representing the NewsroomBlogPosts component.
+ * @description This component displays the latest blog posts.
  */
 export default function NewsroomBlogPosts() {
   const [nextEl, nextElRef] = useSwiperRef();

components/newsroom/NewsroomSection.tsx

@@ -9,8 +9,7 @@ import Paragraph from '../typography/Paragraph';
 import FeaturedBlogPost from './FeaturedBlogPost';
 
 /**
- * Represents the Newsroom section component.
- * @returns {JSX.Element} JSX representation of the component.
+ * @description This component displays the latest news, events, and blog posts.
  */
 export default function NewsroomSection() {
   const { t } = useTranslation('common');

components/newsroom/NewsroomYoutube.tsx

@@ -8,16 +8,16 @@ import ArrowRight from '../icons/ArrowRight';
 import { checkLastSnapIndex, useSwiperRef } from './swiper';
 import YouTubeCard from './YouTubeCard';
 
-interface Props {
+interface NewsroomYoutubeProps {
   className?: string;
 }
 
 /**
  * Newsroom Youtube component displays a Swiper carousel of YouTubeCard components.
- * @param {Props} props - The props for the component.
- * @returns {JSX.Element} - Rendered component.
+ * @description This component displays the latest videos from the AsyncAPI YouTube channel.
+ * @param {string} [props.className=''] - Additional CSS classes for styling.
  */
-export default function NewsroomYoutube({ className = '' }: Props) {
+export default function NewsroomYoutube({ className = '' }: NewsroomYoutubeProps) {
   const [nextEl, nextElRef] = useSwiperRef();
   const [prevEl, prevElRef] = useSwiperRef();
   const [current, setCurrent] = useState<number>(0);

components/newsroom/YouTubeCard.tsx

@@ -15,25 +15,24 @@ interface YouTubeVideo {
   videoId: string;
 }
 
-interface Props {
+interface YouTubeCardProps {
   video: YouTubeVideo;
 }
 
 /**
- * Represents a YouTube video card.
+ * @description This component displays a YouTube video card with an image, title, description, and link to the video.
  * @param {Props} video - The video object containing image, title, description, and videoId.
- * @returns {JSX.Element} The JSX element representing the YouTube video card.
  */
-const YouTubeCard: React.FC<Props> = ({ video }) => {
+export default function YouTubeCard({ video }: YouTubeCardProps) {
   return (
     <li className={'min-w-full h-full max-w-md rounded-lg px-2 pb-6'}>
       <article className='h-full rounded-lg'>
-        <div className={'flex h-full cursor-pointer flex-col divide-y divide-gray-200 overflow-hidden rounded-lg border border-gray-200 shadow-md transition-all duration-300 ease-in-out hover:shadow-lg'}>
-          <img data-testid='YoutubeCard-img'
-            src={video.image_url}
-            alt='video'
-            className='h-60 w-full object-cover'
-          />
+        <div
+          className={
+            'flex h-full cursor-pointer flex-col divide-y divide-gray-200 overflow-hidden rounded-lg border border-gray-200 shadow-md transition-all duration-300 ease-in-out hover:shadow-lg'
+          }
+        >
+          <img data-testid='YoutubeCard-img' src={video.image_url} alt='video' className='h-60 w-full object-cover' />
 
           <div className='flex flex-1 flex-col justify-between bg-white p-6' data-testid='YoutubeCard-main'>
             <div>
@@ -46,10 +45,7 @@ const YouTubeCard: React.FC<Props> = ({ video }) => {
             </div>
 
             <div className='mt-6 block'>
-              <TextLink
-                href={`https://youtube.com/watch?v=${video.videoId}`}
-                target='_blank'
-              >
+              <TextLink href={`https://youtube.com/watch?v=${video.videoId}`} target='_blank'>
                 Watch on Youtube
                 <ArrowRight className='inline w-6' />
               </TextLink>
@@ -59,6 +55,4 @@ const YouTubeCard: React.FC<Props> = ({ video }) => {
       </article>
     </li>
   );
-};
-
-export default YouTubeCard;
+}

components/newsroom/swiper.tsx

@@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from 'react';
 
 /**
  * Custom hook to manage swiper reference.
- * @returns A tuple containing the wrapper element and a ref object.
+ * @description This hook returns a tuple containing the wrapper element and a ref object.
  */
 export function useSwiperRef(): [HTMLButtonElement | null, React.RefObject<HTMLButtonElement>] {
   const [wrapper, setWrapper] = useState<HTMLButtonElement | null>(null);

types/components/navigation/BlogPostType.ts

@@ -0,0 +1,6 @@
+export enum BlogPostType {
+  Video = 'video',
+  Marketing = 'marketing',
+  Strategy = 'strategy',
+  Communication = 'communication',
+}