refactor: tools folder inside pages

src/components/Hero.tsx

@@ -15,12 +15,12 @@ const exampleTools: { label: string; url: string }[] = [
   },
   { label: 'Convert text to morse code', url: '/string/to-morse' },
   { label: 'Change GIF speed', url: '/gif/change-speed' },
-  { label: 'Pick a random item', url: '' },
-  { label: 'Find and replace text', url: '' },
-  { label: 'Convert emoji to image', url: '' },
-  { label: 'Split a string', url: '/string/split' },
+  { label: 'Sort a list', url: 'list/sort' },
+  { label: 'Repeat text', url: 'string/repeat' },
+  { label: 'Split a text', url: '/string/split' },
   { label: 'Calculate number sum', url: '/number/sum' },
-  { label: 'Pixelate an image', url: '' }
+  { label: 'Shuffle a list', url: 'list/shuffle' },
+  { label: 'Change colors in image', url: 'png/change-colors-in-png' }
 ];
 export default function Hero() {
   const [inputValue, setInputValue] = useState<string>('');

src/pages/tools/image/png/change-colors-in-png/change-colors-in-png.e2e.spec.ts

@@ -2,7 +2,7 @@ import { expect, test } from '@playwright/test';
 import { Buffer } from 'buffer';
 import path from 'path';
 import Jimp from 'jimp';
-import { convertHexToRGBA } from '../../../../utils/color';
+import { convertHexToRGBA } from '../../../../../utils/color';
 
 test.describe('Change colors in png', () => {
   test.beforeEach(async ({ page }) => {

src/pages/tools/image/png/change-colors-in-png/index.tsx

@@ -1,13 +1,13 @@
 import { Box } from '@mui/material';
 import React, { useState } from 'react';
 import * as Yup from 'yup';
-import ToolFileInput from '../../../../components/input/ToolFileInput';
-import ToolFileResult from '../../../../components/result/ToolFileResult';
-import ToolOptions from '../../../../components/options/ToolOptions';
-import ColorSelector from '../../../../components/options/ColorSelector';
+import ToolFileInput from '@components/input/ToolFileInput';
+import ToolFileResult from '@components/result/ToolFileResult';
+import ToolOptions from '@components/options/ToolOptions';
+import ColorSelector from '@components/options/ColorSelector';
 import Color from 'color';
 import TextFieldWithDesc from 'components/options/TextFieldWithDesc';
-import ToolInputAndResult from '../../../../components/ToolInputAndResult';
+import ToolInputAndResult from '@components/ToolInputAndResult';
 import { areColorsSimilar } from 'utils/color';
 
 const initialValues = {

src/pages/tools/image/png/create-transparent/index.tsx

@@ -1,13 +1,13 @@
 import { Box } from '@mui/material';
 import React, { useState } from 'react';
 import * as Yup from 'yup';
-import ToolFileInput from '../../../../components/input/ToolFileInput';
-import ToolFileResult from '../../../../components/result/ToolFileResult';
-import ToolOptions from '../../../../components/options/ToolOptions';
-import ColorSelector from '../../../../components/options/ColorSelector';
+import ToolFileInput from '@components/input/ToolFileInput';
+import ToolFileResult from '@components/result/ToolFileResult';
+import ToolOptions from '@components/options/ToolOptions';
+import ColorSelector from '@components/options/ColorSelector';
 import Color from 'color';
 import TextFieldWithDesc from 'components/options/TextFieldWithDesc';
-import ToolInputAndResult from '../../../../components/ToolInputAndResult';
+import ToolInputAndResult from '@components/ToolInputAndResult';
 import { areColorsSimilar } from 'utils/color';
 
 const initialValues = {

src/pages/tools/list/find-most-popular/index.tsx

@@ -1,19 +1,19 @@
 import { Box } from '@mui/material';
 import React, { useState } from 'react';
-import ToolTextInput from '../../../components/input/ToolTextInput';
-import ToolTextResult from '../../../components/result/ToolTextResult';
-import ToolOptions from '../../../components/options/ToolOptions';
+import ToolTextInput from '@components/input/ToolTextInput';
+import ToolTextResult from '@components/result/ToolTextResult';
+import ToolOptions from '@components/options/ToolOptions';
 import {
   DisplayFormat,
   SortingMethod,
   SplitOperatorType,
   TopItemsList
 } from './service';
-import ToolInputAndResult from '../../../components/ToolInputAndResult';
-import SimpleRadio from '../../../components/options/SimpleRadio';
-import TextFieldWithDesc from '../../../components/options/TextFieldWithDesc';
-import CheckboxWithDesc from '../../../components/options/CheckboxWithDesc';
-import SelectWithDesc from '../../../components/options/SelectWithDesc';
+import ToolInputAndResult from '@components/ToolInputAndResult';
+import SimpleRadio from '@components/options/SimpleRadio';
+import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
+import CheckboxWithDesc from '@components/options/CheckboxWithDesc';
+import SelectWithDesc from '@components/options/SelectWithDesc';
 
 const initialValues = {
   splitSeparatorType: 'symbol' as SplitOperatorType,

src/pages/tools/list/find-unique/index.tsx

@@ -1,13 +1,13 @@
 import { Box } from '@mui/material';
 import React, { useState } from 'react';
-import ToolTextInput from '../../../components/input/ToolTextInput';
-import ToolTextResult from '../../../components/result/ToolTextResult';
-import ToolOptions from '../../../components/options/ToolOptions';
+import ToolTextInput from '@components/input/ToolTextInput';
+import ToolTextResult from '@components/result/ToolTextResult';
+import ToolOptions from '@components/options/ToolOptions';
 import { findUniqueCompute, SplitOperatorType } from './service';
-import ToolInputAndResult from '../../../components/ToolInputAndResult';
-import SimpleRadio from '../../../components/options/SimpleRadio';
-import TextFieldWithDesc from '../../../components/options/TextFieldWithDesc';
-import CheckboxWithDesc from '../../../components/options/CheckboxWithDesc';
+import ToolInputAndResult from '@components/ToolInputAndResult';
+import SimpleRadio from '@components/options/SimpleRadio';
+import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
+import CheckboxWithDesc from '@components/options/CheckboxWithDesc';
 
 const initialValues = {
   splitOperatorType: 'symbol' as SplitOperatorType,

src/pages/tools/list/group/index.tsx

@@ -1,14 +1,14 @@
 import { Box } from '@mui/material';
 import React, { useState } from 'react';
-import ToolTextInput from '../../../components/input/ToolTextInput';
-import ToolTextResult from '../../../components/result/ToolTextResult';
-import ToolOptions from '../../../components/options/ToolOptions';
+import ToolTextInput from '@components/input/ToolTextInput';
+import ToolTextResult from '@components/result/ToolTextResult';
+import ToolOptions from '@components/options/ToolOptions';
 import { groupList, SplitOperatorType } from './service';
-import ToolInputAndResult from '../../../components/ToolInputAndResult';
-import SimpleRadio from '../../../components/options/SimpleRadio';
-import TextFieldWithDesc from '../../../components/options/TextFieldWithDesc';
-import CheckboxWithDesc from '../../../components/options/CheckboxWithDesc';
-import { formatNumber } from '../../../utils/number';
+import ToolInputAndResult from '@components/ToolInputAndResult';
+import SimpleRadio from '@components/options/SimpleRadio';
+import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
+import CheckboxWithDesc from '@components/options/CheckboxWithDesc';
+import { formatNumber } from '../../../../utils/number';
 
 const initialValues = {
   splitOperatorType: 'symbol' as SplitOperatorType,

src/pages/tools/list/reverse/index.tsx

@@ -1,12 +1,12 @@
 import { Box } from '@mui/material';
 import React, { useState } from 'react';
-import ToolTextInput from '../../../components/input/ToolTextInput';
-import ToolTextResult from '../../../components/result/ToolTextResult';
-import ToolOptions from '../../../components/options/ToolOptions';
+import ToolTextInput from '@components/input/ToolTextInput';
+import ToolTextResult from '@components/result/ToolTextResult';
+import ToolOptions from '@components/options/ToolOptions';
 import { reverseList, SplitOperatorType } from './service';
-import ToolInputAndResult from '../../../components/ToolInputAndResult';
-import SimpleRadio from '../../../components/options/SimpleRadio';
-import TextFieldWithDesc from '../../../components/options/TextFieldWithDesc';
+import ToolInputAndResult from '@components/ToolInputAndResult';
+import SimpleRadio from '@components/options/SimpleRadio';
+import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
 
 const initialValues = {
   splitOperatorType: 'symbol' as SplitOperatorType,

src/pages/tools/list/rotate/index.tsx

@@ -1,13 +1,13 @@
 import { Box } from '@mui/material';
 import React, { useState } from 'react';
-import ToolTextInput from '../../../components/input/ToolTextInput';
-import ToolTextResult from '../../../components/result/ToolTextResult';
-import ToolOptions from '../../../components/options/ToolOptions';
+import ToolTextInput from '@components/input/ToolTextInput';
+import ToolTextResult from '@components/result/ToolTextResult';
+import ToolOptions from '@components/options/ToolOptions';
 import { rotateList, SplitOperatorType } from './service';
-import ToolInputAndResult from '../../../components/ToolInputAndResult';
-import SimpleRadio from '../../../components/options/SimpleRadio';
-import TextFieldWithDesc from '../../../components/options/TextFieldWithDesc';
-import { formatNumber } from '../../../utils/number';
+import ToolInputAndResult from '@components/ToolInputAndResult';
+import SimpleRadio from '@components/options/SimpleRadio';
+import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
+import { formatNumber } from '../../../../utils/number';
 
 const initialValues = {
   splitOperatorType: 'symbol' as SplitOperatorType,

src/pages/tools/list/shuffle/index.tsx

@@ -1,13 +1,13 @@
 import { Box } from '@mui/material';
 import React, { useState } from 'react';
-import ToolTextInput from '../../../components/input/ToolTextInput';
-import ToolTextResult from '../../../components/result/ToolTextResult';
-import ToolOptions from '../../../components/options/ToolOptions';
+import ToolTextInput from '@components/input/ToolTextInput';
+import ToolTextResult from '@components/result/ToolTextResult';
+import ToolOptions from '@components/options/ToolOptions';
 import { shuffleList, SplitOperatorType } from './service';
-import ToolInputAndResult from '../../../components/ToolInputAndResult';
-import SimpleRadio from '../../../components/options/SimpleRadio';
-import TextFieldWithDesc from '../../../components/options/TextFieldWithDesc';
-import { isNumber } from '../../../utils/string';
+import ToolInputAndResult from '@components/ToolInputAndResult';
+import SimpleRadio from '@components/options/SimpleRadio';
+import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
+import { isNumber } from '../../../../utils/string';
 
 const initialValues = {
   splitOperatorType: 'symbol' as SplitOperatorType,

src/pages/tools/list/sort/index.tsx

@@ -1,14 +1,14 @@
 import { Box } from '@mui/material';
 import React, { useState } from 'react';
-import ToolTextInput from '../../../components/input/ToolTextInput';
-import ToolTextResult from '../../../components/result/ToolTextResult';
-import ToolOptions from '../../../components/options/ToolOptions';
+import ToolTextInput from '@components/input/ToolTextInput';
+import ToolTextResult from '@components/result/ToolTextResult';
+import ToolOptions from '@components/options/ToolOptions';
 import { Sort, SortingMethod, SplitOperatorType } from './service';
-import ToolInputAndResult from '../../../components/ToolInputAndResult';
-import SimpleRadio from '../../../components/options/SimpleRadio';
-import TextFieldWithDesc from '../../../components/options/TextFieldWithDesc';
-import CheckboxWithDesc from '../../../components/options/CheckboxWithDesc';
-import SelectWithDesc from '../../../components/options/SelectWithDesc';
+import ToolInputAndResult from '@components/ToolInputAndResult';
+import SimpleRadio from '@components/options/SimpleRadio';
+import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
+import CheckboxWithDesc from '@components/options/CheckboxWithDesc';
+import SelectWithDesc from '@components/options/SelectWithDesc';
 
 const initialValues = {
   splitSeparatorType: 'symbol' as SplitOperatorType,

src/pages/tools/number/generate/index.tsx

@@ -1,10 +1,10 @@
 import { Box } from '@mui/material';
 import React, { useState } from 'react';
-import ToolTextResult from '../../../components/result/ToolTextResult';
-import ToolOptions from '../../../components/options/ToolOptions';
+import ToolTextResult from '@components/result/ToolTextResult';
+import ToolOptions from '@components/options/ToolOptions';
 import { listOfIntegers } from './service';
-import ToolInputAndResult from '../../../components/ToolInputAndResult';
-import TextFieldWithDesc from '../../../components/options/TextFieldWithDesc';
+import ToolInputAndResult from '@components/ToolInputAndResult';
+import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
 
 const initialValues = {
   firstValue: '1',

src/pages/tools/number/sum/index.tsx

@@ -1,13 +1,13 @@
 import { Box } from '@mui/material';
 import React, { useState } from 'react';
-import ToolTextInput from '../../../components/input/ToolTextInput';
-import ToolTextResult from '../../../components/result/ToolTextResult';
-import ToolOptions from '../../../components/options/ToolOptions';
+import ToolTextInput from '@components/input/ToolTextInput';
+import ToolTextResult from '@components/result/ToolTextResult';
+import ToolOptions from '@components/options/ToolOptions';
 import { compute, NumberExtractionType } from './service';
-import RadioWithTextField from '../../../components/options/RadioWithTextField';
-import SimpleRadio from '../../../components/options/SimpleRadio';
-import CheckboxWithDesc from '../../../components/options/CheckboxWithDesc';
-import ToolInputAndResult from '../../../components/ToolInputAndResult';
+import RadioWithTextField from '@components/options/RadioWithTextField';
+import SimpleRadio from '@components/options/SimpleRadio';
+import CheckboxWithDesc from '@components/options/CheckboxWithDesc';
+import ToolInputAndResult from '@components/ToolInputAndResult';
 
 const initialValues = {
   extractionType: 'smart' as NumberExtractionType,

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

@@ -1,17 +1,17 @@
 import { Box } from '@mui/material';
 import React, { useState } from 'react';
 import * as Yup from 'yup';
-import ToolTextInput from '../../../components/input/ToolTextInput';
-import ToolTextResult from '../../../components/result/ToolTextResult';
-import ToolOptions from '../../../components/options/ToolOptions';
+import ToolTextInput from '@components/input/ToolTextInput';
+import ToolTextResult from '@components/result/ToolTextResult';
+import ToolOptions from '@components/options/ToolOptions';
 import { mergeText } from './service';
-import TextFieldWithDesc from '../../../components/options/TextFieldWithDesc';
-import CheckboxWithDesc from '../../../components/options/CheckboxWithDesc';
-import ToolInputAndResult from '../../../components/ToolInputAndResult';
+import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
+import CheckboxWithDesc from '@components/options/CheckboxWithDesc';
+import ToolInputAndResult from '@components/ToolInputAndResult';
 
-import ToolInfo from '../../../components/ToolInfo';
-import Separator from '../../../components/Separator';
-import Examples from '../../../components/examples/Examples';
+import ToolInfo from '@components/ToolInfo';
+import Separator from '@components/Separator';
+import Examples from '@components/examples/Examples';
 
 const initialValues = {
   joinCharacter: '',

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

@@ -1,12 +1,12 @@
 import { Box } from '@mui/material';
 import React, { useState } from 'react';
-import ToolTextInput from '../../../components/input/ToolTextInput';
-import ToolTextResult from '../../../components/result/ToolTextResult';
-import ToolOptions from '../../../components/options/ToolOptions';
+import ToolTextInput from '@components/input/ToolTextInput';
+import ToolTextResult from '@components/result/ToolTextResult';
+import ToolOptions from '@components/options/ToolOptions';
 import { compute, SplitOperatorType } from './service';
-import RadioWithTextField from '../../../components/options/RadioWithTextField';
-import TextFieldWithDesc from '../../../components/options/TextFieldWithDesc';
-import ToolInputAndResult from '../../../components/ToolInputAndResult';
+import RadioWithTextField from '@components/options/RadioWithTextField';
+import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
+import ToolInputAndResult from '@components/ToolInputAndResult';
 
 const initialValues = {
   splitSeparatorType: 'symbol' as SplitOperatorType,

src/pages/tools/string/to-morse/index.tsx

@@ -1,11 +1,11 @@
 import { Box } from '@mui/material';
 import React, { useState } from 'react';
-import ToolTextInput from '../../../components/input/ToolTextInput';
-import ToolTextResult from '../../../components/result/ToolTextResult';
-import ToolOptions from '../../../components/options/ToolOptions';
+import ToolTextInput from '@components/input/ToolTextInput';
+import ToolTextResult from '@components/result/ToolTextResult';
+import ToolOptions from '@components/options/ToolOptions';
 import { compute } from './service';
-import TextFieldWithDesc from '../../../components/options/TextFieldWithDesc';
-import ToolInputAndResult from '../../../components/ToolInputAndResult';
+import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
+import ToolInputAndResult from '@components/ToolInputAndResult';
 
 const initialValues = {
   dotSymbol: '.',