feat: migrate buttons folder

components/buttons/ApplyJob.tsx

@@ -0,0 +1,28 @@
+import { IJob } from '@/types/job';
+import Button from './Button'
+
+interface IApplyJobButtonProps {
+  job: IJob
+  className?: string
+}
+
+export default function ApplyJobButton({ job,  className = '' }: IApplyJobButtonProps) {
+  const getHref = (contact: string) => {
+    try {
+      new URL(contact);
+    } catch (_) {
+      return `mailto:${contact}`;  
+    }
+
+    return contact;
+  }
+
+  return (
+    <Button
+      href={getHref(job.contact)}
+      target="_blank"
+      text="Apply for this job"
+      className={className}
+    />
+  )
+}

components/buttons/Button.tsx

@@ -0,0 +1,77 @@
+import { twMerge } from "tailwind-merge";
+import Link from 'next/link'
+
+type IButtonProps = {
+  text: string;
+  icon?: React.ReactNode;
+  iconPosition?: 'left' | 'right';
+  target?: string;
+  bgClassName?: string;
+  textClassName?: string;
+  buttonSize?: 'small' | 'default';
+  type?: 'submit' | 'reset' | 'button';
+} & 
+({
+  href: string;
+} & React.AnchorHTMLAttributes<HTMLAnchorElement> | {
+  href: undefined | null;
+} & React.ButtonHTMLAttributes<HTMLButtonElement>)
+
+
+/**
+ * @description The Button component is a reusable button component that can be used to render a button or an anchor tag. It accepts a variety of props to customize the button's appearance and behavior.
+ * @description The component accepts button or anchor tag props based on the presence of the href prop. If the href prop is present, the component will render an anchor tag, otherwise it will render a button tag.
+ */
+export default function Button({
+  text,
+  type = 'button',
+  target = '_self',
+  icon,
+  iconPosition = 'right',
+  className,
+  bgClassName = twMerge(`bg-primary-500 hover:bg-primary-400`),
+  textClassName = twMerge(`text-white`),
+  buttonSize,
+  ...props
+}: IButtonProps) : React.ReactElement {
+
+  const smallButtonClasses = twMerge(`${bgClassName} ${textClassName} transition-all duration-500 ease-in-out rounded-md px-3 py-2 text-sm font-medium tracking-heading ${className || ''}`)
+  const classNames = twMerge(`${bgClassName} ${textClassName} transition-all duration-500 ease-in-out rounded-md px-4 py-3 text-md font-semibold tracking-heading ${className || ''}`)
+
+  if (!props.href) {    
+    return (
+      <button {...props as React.ButtonHTMLAttributes<HTMLButtonElement>} type={type} className={buttonSize === 'small' ? smallButtonClasses : classNames} data-testid="Button-main" > 
+        {
+          icon && iconPosition === 'left' && (
+            <span className="inline-block mr-2" data-testid="Button-icon-left">{icon}</span>
+          )
+        }
+        <span className="inline-block">{text}</span>
+        {
+          icon && iconPosition === 'right' && (
+            <span className="inline-block ml-2" data-testid="Button-icon-right">{icon}</span>
+          )
+        }
+      </button>
+    )
+  }
+
+  return (
+    <Link href={props.href} passHref>
+      <a {...props} target={target} rel="noopener noreferrer" className={buttonSize === 'small' ? smallButtonClasses : classNames} data-testid="Button-link">
+        {
+          icon && iconPosition === 'left' && (
+            <span className="inline-block mr-2">{icon}</span>
+          )
+        }
+        <span className="inline-block">{text}</span>
+        {
+          icon && iconPosition === 'right' && (
+            <span className="inline-block ml-2">{icon}</span>
+          )
+        }
+      </a>
+    </Link>
+  )
+}
+

components/buttons/ChapterSuggestion.tsx

@@ -0,0 +1,51 @@
+import { HTMLAttributeAnchorTarget } from 'react'
+import IconArrowRight from '../icons/ArrowRight'
+import Link from 'next/link'
+import { Url } from 'url'
+
+export interface IChapterSuggestionProps {
+  href: Url
+  target?: HTMLAttributeAnchorTarget
+  title: string
+  description: string
+  linkText: string
+  className?: string
+}
+
+/**
+ * 
+ * @param {Object} props - The props of the component
+ * @param {string} props.href - The URL of the chapter
+ * @param {string} props.target - The target of the link
+ * @param {string} props.title - The title of the chapter
+ * @param {string} props.description - The description of the chapter
+ * @param {string} props.linkText - The text of the link
+ * @param {string} props.className - The class name of the component
+ */
+export default function ChapterSuggestion({
+  href,
+  target = '_self',
+  title,
+  description,
+  linkText,
+  className,
+}: IChapterSuggestionProps) {
+  return (
+    <Link href={href}>
+      <a
+        target={target}
+        rel="noopener noreferrer"
+        title={description}
+        className={`${className} flex flex-col mt-4 p-6 max-w-lg rounded shadow-md border border-gray-200 text-gray-900 transition-all duration-300 ease-in-out hover:shadow-lg hover:border-gray-300`}
+       data-testid="ChapterSuggestion-link"
+      >
+        <h5 className="text-lg font-medium font-sans antialiased mb-2">{title}</h5>
+        <p className="flex-1 mb-2 font-normal text-gray-600 font-sans antialiased">{description}</p>
+        <p className="text-primary-500 font-medium font-sans antialiased">
+          {linkText}
+          <IconArrowRight className="inline-block h-4" />
+        </p>
+      </a>
+    </Link>
+  )
+}

components/buttons/ChapterSuggestions.tsx

@@ -0,0 +1,31 @@
+import ChapterSuggestion, { IChapterSuggestionProps } from "./ChapterSuggestion";
+
+interface IChapterSuggestionsProps {
+  suggestions: IChapterSuggestionProps[]
+  className?: string
+}
+
+/**
+ * 
+ * @param {Object} props - The props of the component
+ * @param {Array} props.suggestions - The suggestions of the chapter
+ * @param {string} props.className - The class name of the component
+ */
+export default function ChapterSuggestions({ suggestions = [], className = '' }: IChapterSuggestionsProps) {
+  return (
+    <div className={`${className} grid grid-cols-1 gap-4 sm:grid-cols-2`}>
+      {
+        suggestions.map((suggestion, index) => (
+          <ChapterSuggestion
+            key={index}
+            href={suggestion.href}
+            title={suggestion.title}
+            description={suggestion.description}
+            linkText={suggestion.linkText}
+            className={suggestion.className}
+          />
+        ))
+      }
+    </div>
+  )
+}

components/buttons/DocsButton.tsx

@@ -0,0 +1,72 @@
+import { IPost } from '@/types/post';
+import Link from 'next/link';
+
+export interface IDocsButtonProps {
+  post: IPost
+  className?: string
+}
+
+export default function DocsButton({ post, className = '' }: IDocsButtonProps) {
+  return (
+    <div className={`flex flex-row gap-4 mb-4 h-full ${className}`}>
+      <div className="w-1/2 h-auto">
+        { post?.prevPage && <Link href={post.prevPage.href} passHref>
+            <a>
+            <div className="p-4 rounded shadow-md border border-gray-200 transition-all duration-300 ease-in-out hover:shadow-lg hover:border-gray-300 text-center lg:text-left cursor-pointer">
+              <div className="text-secondary-500" data-testid="DocsButton-Prevdiv">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="h-6 w-6 inline mr-1"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M11 15l-3-3m0 0l3-3m-3 3h8M3 12a9 9 0 1118 0 9 9 0 01-18 0z"
+                  />
+                </svg>
+                <div className="my-auto font-bold text-sm inline uppercase">
+                  Go Back
+                </div>
+              </div>
+              <div className="font-medium text-base my-2" data-testid="DocsButton-PrevPage" >{post.prevPage.title}</div>
+            </div>
+            </a>
+          </Link>
+        }
+      </div>
+      <div className="w-1/2 h-auto">
+        { post?.nextPage && <Link href={post.nextPage.href} className='h-auto' passHref>
+            <a>
+            <div className="p-4 rounded shadow-md border border-gray-200 transition-all duration-300 ease-in-out hover:shadow-lg hover:border-gray-300 text-center lg:text-right cursor-pointer h-full">
+              <div className="text-secondary-500" data-testid="DocsButton-Nextdiv">
+                <div className="font-bold my-auto text-sm inline uppercase">
+                  Up Next
+                </div>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="h-6 w-6 inline ml-1"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z"
+                  />
+                </svg>
+              </div>
+              <div className="font-medium text-base my-2" data-testid="DocsButton-NextPage">{post.nextPage.title}</div>
+            </div>
+            </a>
+          </Link>
+        }
+      </div>
+    </div>
+  );
+}

components/buttons/GitHubIssue.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+
+export default function GitHubIssue({ className = '' }) {
+    return (
+        <a className={`bg-black text-white flex flex-row lg:w-6/12 shadow-md hover:shadow-lg transition-all duration-500 ease-in-out py-2 rounded justify-center ${className}`} href='https://github.com/asyncapi/website/issues/new?assignees=alequetzalli+-&labels=%F0%9F%93%91+docs&template=docs.yml&title=%5B%F0%9F%93%91+Docs%5D%3A+' target='_blank' rel='noopener noreferrer' data-testid="GithubIssue-Link">
+            <img src='/img/logos/github-fill.svg' className='mr-2' alt="Github:AsyncAPI" />
+            Create Issue on GitHub
+        </a>
+    )
+}

components/buttons/GithubButton.tsx

@@ -0,0 +1,39 @@
+import Button from './Button'
+import IconGithub from '../icons/Github'
+import { IButtonDefaultProps } from './types';
+// TODO: add this again when we have i18n
+// import { useTranslation } from '../../lib/i18n'
+
+interface IGithubButtonProps extends IButtonDefaultProps {
+  inNav?: boolean;
+}
+
+export default function GithubButton({
+  text = 'githubButton',
+  href = 'https://github.com/asyncapi',
+  target = '_blank',
+  iconPosition = 'left',
+  className,
+  inNav
+}: IGithubButtonProps) {
+
+  // TODO: add this again when we have i18n
+  // const { t } = useTranslation("common");
+
+  return (
+    <Button
+      // TODO: add this again when we have i18n
+      // text={t(text)}
+      text={text}
+      icon={<IconGithub className="inline-block -mt-1 w-6 h-6" />}
+      href={href}
+      iconPosition={iconPosition}
+      target={target}
+      className={className}
+      data-testid="Github-button"
+      bgClassName="bg-gray-800 hover:bg-gray-700"
+      buttonSize={ inNav ? "small" : "default" }
+    />
+  )
+}
+

components/buttons/GoogleCalendarButton.tsx

@@ -0,0 +1,34 @@
+import Button from './Button';
+import IconGoogleCalendar from '../icons/GoogleCalendar';
+import { IButtonDefaultProps } from './types';
+// TODO: add this again when we have i18n
+// import { useTranslation } from '../../lib/i18n';
+
+interface IGoogleCalendarButtonProps extends IButtonDefaultProps {}
+
+export default function GoogleCalendarButton({
+  text = 'googleCalendarBtn',
+  href,
+  target = '_blank',
+  iconPosition = 'left',
+  className,
+}: IGoogleCalendarButtonProps) {
+
+  // TODO: add this again when we have i18n
+  // const { t } = useTranslation('common'); 
+
+  return (
+    <Button
+      // TODO: add this again when we have i18n
+      // text={t(text)}
+      text={text}
+      icon={<IconGoogleCalendar />}
+      href={href}
+      iconPosition={iconPosition}
+      target={target}
+      className={`text-center block mt-2 md:mt-0 md:inline-block text-gray-900 ${className}`}
+      bgClassName="bg-gray-200 hover:bg-gray-100"
+    />
+  )
+}
+

components/buttons/ICSFileButton.tsx

@@ -0,0 +1,34 @@
+import Button from './Button';
+import IconCalendar from '../icons/Calendar';
+// TODO: add this again when we have i18n
+// import { useTranslation } from '../../lib/i18n';
+import { IButtonDefaultProps } from './types';
+
+interface IICSFButtonProps extends IButtonDefaultProps {}
+
+export default function ICSFButton({
+  text = 'icsFileBtn',
+  href,
+  target = '_blank',
+  iconPosition = 'left',
+  className,
+}: IICSFButtonProps) {
+
+  // TODO: add this again when we have i18n
+  // const { t } = useTranslation('common');
+
+  return (
+    <Button
+      // TODO: add this again when we have i18n
+      // text={t(text)}
+      text={text}
+      icon={<IconCalendar />}
+      href={href}
+      iconPosition={iconPosition}
+      target={target}
+      className={`text-center block mt-2 md:mt-0 md:inline-block text-gray-900 ${className}`}
+      bgClassName="bg-gray-200 hover:bg-gray-100"
+    />
+  )
+}
+