chore: tools by category

src/tools/defineTool.tsx

@@ -5,14 +5,17 @@ interface ToolOptions {
   path: string;
   component: LazyExoticComponent<JSXElementConstructor<NonNullable<unknown>>>;
   keywords: string[];
+  image?: string;
   name: string;
   description: string;
 }
 
 export interface DefinedTool {
+  type: string;
   path: string;
   name: string;
   description: string;
+  image?: string;
   keywords: string[];
   component: () => JSX.Element;
 }
@@ -21,16 +24,18 @@ export const defineTool = (
   basePath: string,
   options: ToolOptions
 ): DefinedTool => {
-  const { path, name, description, keywords, component } = options;
+  const { image, path, name, description, keywords, component } = options;
   const Component = component;
   return {
+    type: basePath,
     path: `${basePath}/${path}`,
     name,
+    image,
     description,
     keywords,
     component: () => {
       return (
-        <ToolLayout title={name} description={description}>
+        <ToolLayout title={name} description={description} image={image}>
           <Component />
         </ToolLayout>
       );

src/tools/index.ts

@@ -1,9 +1,21 @@
 import { stringTools } from '../pages/string/stringTools';
 import { imageTools } from '../pages/images/imageTools';
 import { DefinedTool } from './defineTool';
+import { capitalizeFirstLetter } from '../utils/string';
 
-export const tools: DefinedTool[] = [...stringTools, ...imageTools];
-
+export const tools: DefinedTool[] = [...imageTools, ...stringTools];
+const categoriesDescriptions: { type: string; value: string }[] = [
+  {
+    type: 'string',
+    value:
+      'Tools for working with text – convert text to images, find and replace text, split text into fragments, join text lines, repeat text, and much more.'
+  },
+  {
+    type: 'png',
+    value:
+      'Tools for working with PNG images – convert PNGs to JPGs, create transparent PNGs, change PNG colors, crop, rotate, resize PNGs, and much more.'
+  }
+];
 export const filterTools = (
   tools: DefinedTool[],
   query: string
@@ -21,3 +33,26 @@ export const filterTools = (
       )
   );
 };
+
+export const getToolsByCategory = (): {
+  title: string;
+  description: string;
+  type: string;
+  example: { title: string; path: string };
+}[] => {
+  const grouped: Partial<Record<string, DefinedTool[]>> = Object.groupBy(
+    tools,
+    ({ type }) => type
+  );
+  return Object.entries(grouped).map(([type, tls]) => {
+    return {
+      title: `${capitalizeFirstLetter(type)} Tools`,
+      description:
+        categoriesDescriptions.find((desc) => desc.type === type)?.value ?? '',
+      type,
+      example: tls
+        ? { title: tls[0].name, path: tls[0].path }
+        : { title: '', path: '' }
+    };
+  });
+};