chore(migrate): migrate tools pages

components/editor/CodeBlock.tsx

@@ -268,16 +268,19 @@ export default function CodeBlock({
             style={theme}
             showLineNumbers={showLineNumbers}
             startingLineNumber={startingLineNumber}
-            lineNumberContainerProps={{
-              className: 'pl-2 float-left left-0 sticky bg-code-editor-dark',
-              style: {}
+            lineNumberContainerStyle={{
+              paddingLeft: '0.5em',
+              background: '#252f3f'
             }}
-            lineNumberProps={(lineNumber: number) => {
+            lineNumberStyle={(lineNumber: number) => {
               const isHighlighted = highlightedLines && highlightedLines.includes(lineNumber);
 
               return {
-                className: `${isHighlighted ? 'bg-code-editor-dark-highlight text-gray-500' : 'text-gray-600'}
-                block pl-2 pr-2`
+                display: 'inline-block',
+                marginLeft: '16px',
+                paddingRight: '16px',
+                background: isHighlighted ? '#252f3f' : 'inherit',
+                color: isHighlighted ? '#A3ACAD' : '#8B9394'
               };
             }}
             wrapLines={true}

components/navigation/NavBar.tsx

@@ -151,7 +151,7 @@ export default function NavBar({ className = '', hideLogo = false }: NavBarProps
           <div className='lg:w-auto lg:flex-1'>
             <div className='flex'>
               <Link href='/' className='cursor-pointer' aria-label='AsyncAPI' data-testid='Navbar-logo'>
-                <AsyncAPILogo className='h-8 w-auto sm:h-8' />
+                <AsyncAPILogo className='w-auto' />
               </Link>
             </div>
           </div>

components/tools/CardData.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react';
 import TextTruncate from 'react-text-truncate';
+import { twMerge } from 'tailwind-merge';
 
 import type { VisibleDataListType } from '@/types/components/tools/ToolDataType';
 
@@ -79,7 +80,7 @@ export const CardData = ({
   }, []);
 
   return (
-    <div className={className || 'text-left text-sm text-gray-500'}>
+    <div className={twMerge('text-left text-sm text-gray-500', className)}>
       {heading}
       <span className='group relative'>
         {outsideClick && visible[type] && (

components/tools/Filters.tsx

@@ -73,8 +73,11 @@ export default function Filters({ setOpenFilter }: FiltersProps) {
 
     // Set the params key only when the default value of the key changes. This is to know when the user actually applies filter(s).
 
+    if (checkPaid !== 'all') {
+      searchParams.set('pricing', checkPaid);
+    }
     if (checkOwner) {
-      searchParams.set('owned', isAsyncAPIOwner ? 'true' : 'false');
+      searchParams.set('owned', checkOwner ? 'true' : 'false');
     }
     if (checkedTechnology.length > 0) {
       searchParams.set('techs', checkedTechnology.join(','));

components/tools/ToolsCard.tsx

@@ -90,7 +90,7 @@ export default function ToolsCard({ toolData }: ToolsCardProp) {
           </div>
           <div className='relative'>
             <Paragraph typeStyle={ParagraphTypeStyle.sm}>
-              <div
+              <span
                 ref={descriptionRef}
                 className={`w-full ${showMoreDescription ? 'cursor-pointer' : ''}`}
                 onMouseEnter={() =>
@@ -100,7 +100,7 @@ export default function ToolsCard({ toolData }: ToolsCardProp) {
                 }
               >
                 <TextTruncate element='span' line={3} text={toolData.description} />
-              </div>
+              </span>
             </Paragraph>
             {showDescription && (
               <div
@@ -122,8 +122,7 @@ export default function ToolsCard({ toolData }: ToolsCardProp) {
             {toolData.filters.language && (
               <div className='mx-6 flex flex-col gap-2'>
                 <CardData
-                  className='text-sm
-              text-gray-700'
+                  className='text-sm'
                   heading='LANGUAGE'
                   data={Data.properties.filters.properties.language.description}
                   type='lang'
@@ -143,7 +142,7 @@ export default function ToolsCard({ toolData }: ToolsCardProp) {
             {toolData.filters?.technology?.length && (
               <div className='mx-6 my-4 flex flex-col gap-2'>
                 <CardData
-                  className='text-sm text-gray-700'
+                  className='text-sm'
                   heading='TECHNOLOGIES'
                   data={Data.properties.filters.properties.technology.description}
                   type='tech'

components/tools/ToolsList.tsx

@@ -26,7 +26,7 @@ export default function ToolsList({ toolsListData }: ToolsListProp) {
               <Heading typeStyle={HeadingTypeStyle.mdSemibold} className='my-2'>
                 {categoryName}
               </Heading>
-              <Paragraph typeStyle={ParagraphTypeStyle.sm}>{toolsListData[categoryName].description}</Paragraph>
+              <Paragraph typeStyle={ParagraphTypeStyle.md}>{toolsListData[categoryName].description}</Paragraph>
               <hr className='my-8' />
               <div className='flex grid-cols-3 flex-col gap-8 lg:grid'>
                 {toolsListData[categoryName].toolsList.map((tool, toolIndex) => (

context/ToolFilterContext.tsx

@@ -10,16 +10,20 @@ interface ToolFilterContextProps {
 }
 
 export const ToolFilterContext = createContext<ToolFilterContextProps>({
-  isPaid: "all",
+  isPaid: 'all',
   isAsyncAPIOwner: false,
   languages: [],
   technologies: [],
-  categories: [],
+  categories: []
 });
 
+/**
+ * @description This component provides the context for the tool filter.
+ * @param props.children - The children to be rendered.
+ */
 function ToolFilter({ children }: { children: React.ReactNode }) {
   const router = useRouter();
-  const [isPaid, setIsPaid] = useState<string>("all");
+  const [isPaid, setIsPaid] = useState<string>('all');
   const [isAsyncAPIOwner, setIsAsyncAPIOwner] = useState<boolean>(false);
   const [languages, setLanguages] = useState<string[]>([]);
   const [technologies, setTechnologies] = useState<string[]>([]);
@@ -29,19 +33,17 @@ function ToolFilter({ children }: { children: React.ReactNode }) {
   useEffect(() => {
     if (!router || !router.isReady) return;
 
-    let { pricing, owned, langs, techs, categories } = router.query;
+    const { pricing, owned, langs, techs, categories: Categories } = router.query;
 
-    setIsPaid(pricing as string || "all");
-    setIsAsyncAPIOwner(owned === "true");
-    setLanguages((langs as string)?.split(",") || []);
-    setTechnologies((techs as string)?.split(",") || []);
-    setCategories((categories as string)?.split(",") || []);
+    setIsPaid((pricing as string) || 'all');
+    setIsAsyncAPIOwner(owned === 'true');
+    setLanguages((langs as string)?.split(',') || []);
+    setTechnologies((techs as string)?.split(',') || []);
+    setCategories((Categories as string)?.split(',') || []);
   }, [router?.query]);
 
   return (
-    <ToolFilterContext.Provider
-      value={{ isPaid, isAsyncAPIOwner, languages, technologies, categories }}
-    >
+    <ToolFilterContext.Provider value={{ isPaid, isAsyncAPIOwner, languages, technologies, categories }}>
       {children}
     </ToolFilterContext.Provider>
   );

package.json

@@ -95,7 +95,7 @@
     "remark-slug": "^7.0.1",
     "swiper": "^11.0.7",
     "tailwind-merge": "^2.2.1",
-    "tailwindcss": "^3.4.1",
+    "tailwindcss": "^3.4.3",
     "typescript": "^5.3.3",
     "yaml": "^2.3.4"
   },