feat: json pretty

src/components/examples/ExampleCard.tsx

@@ -17,7 +17,7 @@ export interface ExampleCardProps<T> {
   sampleText: string;
   sampleResult: string;
   sampleOptions: T;
-  changeInputResult: (newOptions: T) => void;
+  changeInputResult: (newInput: string, newOptions: T) => void;
   getGroups: GetGroupsType<T>;
 }
 
@@ -35,7 +35,7 @@ export default function ExampleCard<T>({
     <Card
       raised
       onClick={() => {
-        changeInputResult(sampleOptions);
+        changeInputResult(sampleText, sampleOptions);
       }}
       sx={{
         bgcolor: theme.palette.background.default,

src/components/examples/ToolExamples.tsx

@@ -15,6 +15,7 @@ export interface ExampleProps<T> {
   exampleCards: CardExampleType<T>[];
   getGroups: GetGroupsType<T>;
   formRef: React.RefObject<FormikProps<T>>;
+  setInput: React.Dispatch<React.SetStateAction<string>>;
 }
 
 export default function ToolExamples<T>({
@@ -22,9 +23,11 @@ export default function ToolExamples<T>({
   subtitle,
   exampleCards,
   getGroups,
-  formRef
+  formRef,
+  setInput
 }: ExampleProps<T>) {
-  function changeInputResult(newOptions: T) {
+  function changeInputResult(newInput: string, newOptions: T) {
+    setInput(newInput);
     formRef.current?.setValues(newOptions);
     const toolsElement = document.getElementById('tool');
     if (toolsElement) {

src/pages/home/Categories.tsx

@@ -1,12 +1,12 @@
 import { getToolsByCategory } from '@tools/index';
 import Grid from '@mui/material/Grid';
 import { Card, CardContent, Stack } from '@mui/material';
-import { HugeiconsIcon } from '@hugeicons/react';
 import { Link, useNavigate } from 'react-router-dom';
 import Typography from '@mui/material/Typography';
 import Button from '@mui/material/Button';
 import { useState } from 'react';
 import { categoriesColors } from 'config/uiConfig';
+import { Icon } from '@iconify/react';
 
 type ArrayElement<ArrayType extends readonly unknown[]> =
   ArrayType extends readonly (infer ElementType)[] ? ElementType : never;
@@ -20,7 +20,6 @@ const SingleCategory = function ({
 }) {
   const navigate = useNavigate();
   const [hovered, setHovered] = useState<boolean>(false);
-  const Icon = category.icon;
   const toggleHover = () => setHovered((prevState) => !prevState);
   return (
     <Grid
@@ -38,8 +37,9 @@ const SingleCategory = function ({
       >
         <CardContent>
           <Stack direction={'row'} spacing={2} alignItems={'center'}>
-            <HugeiconsIcon
-              icon={Icon}
+            <Icon
+              icon={category.icon}
+              fontSize={'60px'}
               style={{
                 transform: `scale(${hovered ? 1.1 : 1}`
               }}

src/pages/tools/string/join/index.tsx

@@ -179,6 +179,7 @@ export default function JoinText({ title }: ToolComponentProps) {
         exampleCards={exampleCards}
         getGroups={getGroups}
         formRef={formRef}
+        setInput={setInput}
       />
     </Box>
   );

src/pages/tools/string/split/index.tsx

@@ -211,6 +211,7 @@ export default function SplitText({ title }: ToolComponentProps) {
         exampleCards={exampleCards}
         getGroups={getGroups}
         formRef={formRef}
+        setInput={setInput}
       />
     </Box>
   );

src/tools/defineTool.tsx

@@ -12,7 +12,13 @@ interface ToolOptions {
   shortDescription: string;
 }
 
-export type ToolCategory = 'string' | 'png' | 'number' | 'gif' | 'list';
+export type ToolCategory =
+  | 'string'
+  | 'png'
+  | 'number'
+  | 'gif'
+  | 'list'
+  | 'json';
 
 export interface DefinedTool {
   type: ToolCategory;

src/tools/index.ts

@@ -6,18 +6,13 @@ 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';
+import { jsonTools } from '../pages/tools/json';
+import { IconifyIcon } from '@iconify/react';
 
 export const tools: DefinedTool[] = [
   ...imageTools,
   ...stringTools,
+  ...jsonTools,
   ...listTools,
   ...videoTools,
   ...numberTools
@@ -26,38 +21,44 @@ const categoriesConfig: {
   type: ToolCategory;
   value: string;
   title?: string;
-  icon: typeof HugeiconsIcon;
+  icon: IconifyIcon | string;
 }[] = [
   {
     type: 'string',
     title: 'Text',
-    icon: TextIcon,
+    icon: 'solar:text-bold-duotone',
     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,
+    icon: 'ph:file-png-thin',
     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,
+    icon: 'lsicon:number-filled',
     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,
+    icon: 'material-symbols-light:gif-rounded',
     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,
+    icon: 'solar:list-bold-duotone',
     value:
       'Tools for working with lists – sort, reverse, randomize lists, find unique and duplicate list items, change list item separators, and much more.'
+  },
+  {
+    type: 'json',
+    icon: 'lets-icons:json-light',
+    value:
+      'Tools for working with JSON data structures – prettify and minify JSON objects, flatten JSON arrays, stringify JSON values, analyze data, and much more'
   }
 ];
 export const filterTools = (
@@ -82,7 +83,7 @@ export const filterTools = (
 export const getToolsByCategory = (): {
   title: string;
   description: string;
-  icon: typeof HugeiconsIcon;
+  icon: IconifyIcon | string;
   type: string;
   example: { title: string; path: string };
   tools: DefinedTool[];

src/utils/string.ts

@@ -9,6 +9,7 @@ export function isNumber(number: any) {
 
 export const replaceSpecialCharacters = (str: string) => {
   return str
+    .replace(/\\"/g, '"')
     .replace(/\\n/g, '\n')
     .replace(/\\t/g, '\t')
     .replace(/\\r/g, '\r')