fix: misc

src/tools/index.ts

@@ -6,42 +6,56 @@ import { numberTools } from '../pages/tools/number';
 import { videoTools } from '../pages/tools/video';
 import { listTools } from '../pages/tools/list';
 import { Entries } from 'type-fest';
+import {
+  ArrangeByNumbers19Icon,
+  Gif01Icon,
+  HugeiconsIcon,
+  LeftToRightListBulletIcon,
+  Png01Icon,
+  TextIcon
+} from '@hugeicons/core-free-icons';
 
 export const tools: DefinedTool[] = [
   ...imageTools,
   ...stringTools,
-  ...numberTools,
+  ...listTools,
   ...videoTools,
-  ...listTools
+  ...numberTools
 ];
 const categoriesConfig: {
   type: ToolCategory;
   value: string;
   title?: string;
+  icon: typeof HugeiconsIcon;
 }[] = [
   {
     type: 'string',
     title: 'Text',
+    icon: TextIcon,
     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',
+    icon: Png01Icon,
     value:
       'Tools for working with PNG images – convert PNGs to JPGs, create transparent PNGs, change PNG colors, crop, rotate, resize PNGs, and much more.'
   },
   {
     type: 'number',
+    icon: ArrangeByNumbers19Icon,
     value:
       'Tools for working with numbers – generate number sequences, convert numbers to words and words to numbers, sort, round, factor numbers, and much more.'
   },
   {
     type: 'gif',
+    icon: Gif01Icon,
     value:
       'Tools for working with GIF animations – create transparent GIFs, extract GIF frames, add text to GIF, crop, rotate, reverse GIFs, and much more.'
   },
   {
     type: 'list',
+    icon: LeftToRightListBulletIcon,
     value:
       'Tools for working with lists – sort, reverse, randomize lists, find unique and duplicate list items, change list item separators, and much more.'
   }
@@ -68,6 +82,7 @@ export const filterTools = (
 export const getToolsByCategory = (): {
   title: string;
   description: string;
+  icon: typeof HugeiconsIcon;
   type: string;
   example: { title: string; path: string };
   tools: DefinedTool[];
@@ -76,14 +91,14 @@ export const getToolsByCategory = (): {
     Object.groupBy(tools, ({ type }) => type);
   return (Object.entries(groupedByType) as Entries<typeof groupedByType>).map(
     ([type, tools]) => {
+      const categoryConfig = categoriesConfig.find(
+        (config) => config.type === type
+      );
       return {
-        title: `${
-          categoriesConfig.find((config) => config.type === type)?.title ??
-          capitalizeFirstLetter(type)
-        } Tools`,
-        description:
-          categoriesConfig.find((desc) => desc.type === type)?.value ?? '',
+        title: `${categoryConfig?.title ?? capitalizeFirstLetter(type)} Tools`,
+        description: categoryConfig?.value ?? '',
         type,
+        icon: categoryConfig!.icon,
         tools: tools ?? [],
         example: tools
           ? { title: tools[0].name, path: tools[0].path }