feat: migrate navigation

components/ClickableLogo.tsx

@@ -3,7 +3,7 @@ import Link from 'next/link';
 import AsyncAPILogo from './AsyncAPILogo';
 
 interface IClickableLogoProps {
-  href: string;
+  href?: string;
   className?: string;
   logoClassName?: string;
 }
@@ -16,10 +16,8 @@ interface IClickableLogoProps {
  */
 export default function ClickableLogo({ href = '/', className = 'flex', logoClassName }: IClickableLogoProps) {
   return (
-    <Link href={href}>
-      <a className={className}>
-        <AsyncAPILogo className={logoClassName} />
-      </a>
+    <Link href={href} className={className}>
+      <AsyncAPILogo className={logoClassName} />
     </Link>
   );
 }

components/data/buckets.ts

@@ -1,5 +1,3 @@
-import type { IconType } from '@/types/components/IconType';
-
 import IconGettingStarted from '../icons/GettingStarted';
 import IconGuide from '../icons/Guide';
 import IconMigration from '../icons/Migration';
@@ -8,25 +6,27 @@ import IconTutorials from '../icons/Tutorials';
 import IconUseCases from '../icons/UseCases';
 import IconUsers from '../icons/Users';
 
-interface BucketType {
+export interface Bucket {
   name: string;
   title: string;
   description: string;
   link: string;
   className: string;
   borderClassName: string;
-  Icon: IconType;
+  href: string;
+  icon: React.ComponentType<any>;
 }
 
-export const buckets: BucketType[] = [
+export const buckets: Bucket[] = [
   {
     name: 'concepts',
     title: 'Concepts',
     description: 'Our Concepts section defines the concepts of AsyncAPI features and capabilities.',
     link: '/docs/concepts',
     className: 'bg-secondary-200',
     borderClassName: 'border-secondary-200',
-    Icon: IconGettingStarted
+    href: '/docs/concepts',
+    icon: IconGettingStarted
   },
   {
     name: 'tutorials',
@@ -35,7 +35,8 @@ export const buckets: BucketType[] = [
     link: '/docs/tutorials',
     className: 'bg-pink-100',
     borderClassName: 'border-pink-100',
-    Icon: IconTutorials
+    href: '/docs/tutorials',
+    icon: IconTutorials
   },
   {
     name: 'guides',
@@ -44,7 +45,8 @@ export const buckets: BucketType[] = [
     link: '/docs/guides',
     className: 'bg-primary-200',
     borderClassName: 'border-primary-200',
-    Icon: IconGuide
+    href: '/docs/guides',
+    icon: IconGuide
   },
   {
     name: 'tools',
@@ -53,7 +55,8 @@ export const buckets: BucketType[] = [
     link: '/docs/tools',
     className: 'bg-green-200',
     borderClassName: 'border-green-200',
-    Icon: IconUseCases
+    href: '/docs/tools',
+    icon: IconUseCases
   },
   {
     name: 'reference',
@@ -62,7 +65,8 @@ export const buckets: BucketType[] = [
     link: '/docs/reference',
     className: 'bg-yellow-200',
     borderClassName: 'border-yellow-200',
-    Icon: IconSpec
+    href: '/docs/reference',
+    icon: IconSpec
   },
   {
     name: 'migration',
@@ -71,7 +75,8 @@ export const buckets: BucketType[] = [
     link: '/docs/migration',
     className: 'bg-blue-400',
     borderClassName: 'border-blue-400',
-    Icon: IconMigration
+    href: '/docs/migration',
+    icon: IconMigration
   },
   {
     name: 'community',
@@ -80,13 +85,13 @@ export const buckets: BucketType[] = [
     link: '/docs/community',
     className: 'bg-orange-200',
     borderClassName: 'border-orange-200',
-    Icon: IconUsers
+    href: '/docs/community',
+    icon: IconUsers
   }
 ].map((bucket) => {
-  // we need such a mapping for some parts of website, e.g navigation blocks use the `icon` property, not `Icon` etc.
   return {
     ...bucket,
     href: bucket.link,
-    icon: bucket.Icon
+    icon: bucket.icon
   };
 });

components/docs/Card.tsx

@@ -1,6 +1,5 @@
 import Link from 'next/link';
 
-import type { IconType } from '@/types/components/IconType';
 import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading';
 import { ParagraphTypeStyle } from '@/types/typography/Paragraph';
 
@@ -12,7 +11,7 @@ interface CardProps {
   description: string;
   link: string;
   className: string;
-  Icon: IconType;
+  Icon: React.ComponentType<any>;
 }
 
 /**

components/docs/DocsCards.tsx

@@ -9,8 +9,8 @@ import Card from './Card';
 export default function DocsCards() {
   return (
     <div className='grid grid-cols-1 gap-4 sm:grid-cols-2' data-testid='Docs-main-div'>
-      {buckets.map((card) => (
-        <Card key={card.title} {...card} />
+      {buckets.map(({ title, description, link, className, icon }) => (
+        <Card key={title} title={title} description={description} link={link} className={className} Icon={icon} />
       ))}
     </div>
   );

components/form/Select.tsx

@@ -0,0 +1,45 @@
+import type { ChangeEvent } from 'react';
+import React from 'react';
+import { twMerge } from 'tailwind-merge';
+
+export interface Option {
+  value: string;
+  text: string;
+}
+
+export interface SelectProps {
+  className?: string;
+  onChange?: (selected: string) => void;
+  options: Option[];
+  selected?: string;
+}
+
+/**
+ * @description Select component for form dropdown.
+ * @param {string} [props.className=''] - Additional CSS classes for the select element.
+ * @param {(value: string) => void} [props.onChange=() => {}] - Function to handle onChange event.
+ * @param {Option[]} props.options - Array of options for the select dropdown.
+ * @param {string} props.selected - Value of the currently selected option.
+ */
+export default function Select({ className = '', onChange = () => {}, options, selected }: SelectProps) {
+  const handleOnChange = (event: ChangeEvent<HTMLSelectElement>) => {
+    onChange(event.target.value);
+  };
+
+  return (
+    <select
+      data-testid='Select-form'
+      onChange={handleOnChange}
+      className={twMerge(
+        `form-select h-full py-0 pl-2 pr-8 inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-indigo-500 ${className}`
+      )}
+      value={selected}
+    >
+      {options.map((option, index) => (
+        <option key={index} value={option.value} data-testid='Option-form'>
+          {option.text}
+        </option>
+      ))}
+    </select>
+  );
+}

components/helpers/applyFilter.ts

@@ -0,0 +1,160 @@
+interface DataObject {
+  name: string;
+  [key: string]: any;
+}
+
+interface FilterCriteria {
+  name: string;
+}
+
+interface Filter {
+  [key: string]: string;
+  value: string;
+}
+
+interface FilterOption {
+  value: string;
+  text: string;
+}
+
+/**
+ * @description Sorts an array of objects based on a string property called 'value'.
+ * @param {{ value: string }[]} arr - Array of objects with a 'value' property of type string.
+ */
+export function sortFilter(arr: { value: string }[]): { value: string }[] {
+  return arr.sort((a, b) => {
+    if (a.value < b.value) {
+      return -1;
+    }
+    if (a.value > b.value) {
+      return 1;
+    }
+
+    return 0;
+  });
+}
+
+/**
+ * @description Apply filters to data and update the filters.
+ * @param {FilterCriteria[]} checks - Array of filter criteria objects.
+ * @param {DataObject[]} data - Array of data objects to filter.
+ * @param {(lists: { [key: string]: FilterOption[] }) => void} setFilters - Function to update the filters.
+ */
+export const applyFilterList = (
+  checks: FilterCriteria[],
+  data: DataObject[],
+  setFilters: (lists: { [key: string]: FilterOption[] }) => void
+): void => {
+  if (Object.keys(checks).length) {
+    const lists: { [key: string]: FilterOption[] } = {};
+
+    checks.forEach((check) => {
+      lists[check.name] = [];
+    });
+    for (let i = 0; i < data.length; i++) {
+      const res = data[i];
+
+      Object.keys(lists).forEach((key) => {
+        const result = data[i][key];
+
+        if (res) {
+          if (lists[key].length) {
+            if (Array.isArray(result)) {
+              result.forEach((a) => {
+                if (a.name) {
+                  if (!lists[key].some((e) => e.value === a.name)) {
+                    const newData = {
+                      value: a.name,
+                      text: a.name
+                    };
+
+                    lists[key].push(newData);
+                    sortFilter(lists[key]);
+                  }
+                } else if (!lists[key].some((e) => e.value === a)) {
+                  const newData = {
+                    value: a,
+                    text: a
+                  };
+
+                  lists[key].push(newData);
+                  sortFilter(lists[key]);
+                }
+              });
+            } else if (!lists[key].some((e) => e.value === result)) {
+              const newData = {
+                value: result,
+                text: result
+              };
+
+              lists[key].push(newData);
+              sortFilter(lists[key]);
+            }
+          } else if (Array.isArray(result)) {
+            result.forEach((e) => {
+              if (e.name) {
+                const newData = {
+                  value: e.name,
+                  text: e.name
+                };
+
+                lists[key].push(newData);
+              } else {
+                const newData = {
+                  value: e,
+                  text: e
+                };
+
+                lists[key].push(newData);
+              }
+            });
+          } else {
+            const newData = {
+              value: result,
+              text: result
+            };
+
+            lists[key].push(newData);
+          }
+        }
+      });
+    }
+    setFilters(lists);
+  }
+};
+
+/**
+ * @description Apply filters to data and trigger the filter action.
+ * @param {DataObject[]} inputData - Array of data objects to filter.
+ * @param {(result: DataObject[], query: Filter) => void} onFilter - Function to apply the filter action.
+ * @param {Filter} query - Filter criteria.
+ */
+export const onFilterApply = (
+  inputData: DataObject[],
+  onFilter: (result: DataObject[], query: Filter) => void,
+  query: Filter
+): void => {
+  let result = inputData;
+
+  if (query && Object.keys(query).length >= 1) {
+    Object.keys(query).forEach((property) => {
+      const res = result.filter((e) => {
+        if (!query[property] || e[property] === query[property]) {
+          return e[property];
+        }
+        if (Array.isArray(e[property])) {
+          return (
+            e[property].some((data: any) => data.name === query[property]) ||
+            e[property].includes(query[property]) ||
+            false
+          );
+        }
+
+        return false; // Fixing missing return value issue
+      });
+
+      result = res;
+    });
+  }
+  onFilter(result, query);
+};

components/helpers/is-mobile.ts

@@ -0,0 +1,15 @@
+let isMobile: boolean | undefined;
+
+/**
+ * @description Checks whether the current device is a mobile device.
+ */
+export function isMobileDevice(): boolean {
+  if (typeof navigator === 'undefined') return false;
+  if (typeof isMobile === 'boolean') return isMobile;
+
+  const regexp = /android|iphone|kindle|ipad/i;
+
+  isMobile = regexp.test(navigator.userAgent);
+
+  return isMobile;
+}