refactor: use ToolContent

.idea/workspace.xml

@@ -4,18 +4,20 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="refactor: use ToolContent">
+    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="feat: missing tools">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/options/CheckboxWithDesc.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/options/CheckboxWithDesc.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools/image/png/compress-png/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/image/png/compress-png/index.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/tools/list/duplicate/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/list/duplicate/index.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools/image/png/convert-jgp-to-png/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/image/png/convert-jgp-to-png/index.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/tools/list/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/list/index.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools/image/png/create-transparent/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/image/png/create-transparent/index.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/tools/list/truncate/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/list/truncate/index.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools/json/prettify/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/json/prettify/index.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/tools/list/unwrap/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/list/unwrap/index.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools/list/find-most-popular/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/list/find-most-popular/index.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/tools/list/wrap/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/list/wrap/index.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools/list/group/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/list/group/index.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/tools/string/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/string/index.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools/list/rotate/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/list/rotate/index.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/tools/string/quote/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/string/quote/index.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools/list/sort/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/list/sort/index.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/tools/string/rot13/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/string/rot13/index.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools/number/generate/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/number/generate/index.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/tools/string/rotate/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/string/rotate/index.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools/string/remove-duplicate-lines/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/string/remove-duplicate-lines/index.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools/string/split/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/string/split/index.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools/video/gif/change-speed/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/video/gif/change-speed/index.tsx" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -343,15 +345,7 @@
       <workItem from="1741475969294" duration="4215000" />
       <workItem from="1741494053121" duration="178000" />
       <workItem from="1741537936314" duration="1294000" />
-      <workItem from="1741539602311" duration="2441000" />
+      <workItem from="1741539602311" duration="3899000" />
-    </task>
-    <task id="LOCAL-00107" summary="fix: docs">
-      <option name="closed" value="true" />
-      <created>1740324026721</created>
-      <option name="number" value="00107" />
-      <option name="presentableId" value="LOCAL-00107" />
-      <option name="project" value="LOCAL" />
-      <updated>1740324026721</updated>
     </task>
     <task id="LOCAL-00108" summary="fix: docs">
       <option name="closed" value="true" />
@@ -737,7 +731,15 @@
       <option name="project" value="LOCAL" />
       <updated>1741540939154</updated>
     </task>
-    <option name="localTasksCounter" value="156" />
+    <task id="LOCAL-00156" summary="feat: missing tools">
+      <option name="closed" value="true" />
+      <created>1741542318259</created>
+      <option name="number" value="00156" />
+      <option name="presentableId" value="LOCAL-00156" />
+      <option name="project" value="LOCAL" />
+      <updated>1741542318259</updated>
+    </task>
+    <option name="localTasksCounter" value="157" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -784,7 +786,6 @@
     <option name="CHECK_CODE_SMELLS_BEFORE_PROJECT_COMMIT" value="false" />
     <option name="CHECK_NEW_TODO" value="false" />
     <option name="ADD_EXTERNAL_FILES_SILENTLY" value="true" />
-    <MESSAGE value="refact: examples" />
     <MESSAGE value="fix: examples" />
     <MESSAGE value="feat: json pretty" />
     <MESSAGE value="style: tool categories" />
@@ -809,7 +810,8 @@
     <MESSAGE value="chore: remove unnecessary files" />
     <MESSAGE value="refactor: validateJson" />
     <MESSAGE value="refactor: use ToolContent" />
-    <option name="LAST_COMMIT_MESSAGE" value="refactor: use ToolContent" />
+    <MESSAGE value="feat: missing tools" />
+    <option name="LAST_COMMIT_MESSAGE" value="feat: missing tools" />
   </component>
   <component name="XSLT-Support.FileAssociations.UIState">
     <expand />

src/pages/tools/image/png/compress-png/index.tsx

@@ -3,11 +3,11 @@ 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 TextFieldWithDesc from 'components/options/TextFieldWithDesc';
-import ToolInputAndResult from '@components/ToolInputAndResult';
 import imageCompression from 'browser-image-compression';
 import Typography from '@mui/material/Typography';
+import ToolContent from '@components/ToolContent';
+import { ToolComponentProps } from '@tools/defineTool';
 
 const initialValues = {
   rate: '50'
@@ -16,7 +16,7 @@ const validationSchema = Yup.object({
   // splitSeparator: Yup.string().required('The separator is required')
 });
 
-export default function ChangeColorsInPng() {
+export default function ChangeColorsInPng({ title }: ToolComponentProps) {
   const [input, setInput] = useState<File | null>(null);
   const [result, setResult] = useState<File | null>(null);
   const [originalSize, setOriginalSize] = useState<number | null>(null); // Store original file size
@@ -52,9 +52,10 @@ export default function ChangeColorsInPng() {
   };
 
   return (
-    <Box>
+    <ToolContent
-      <ToolInputAndResult
+      title={title}
-        input={
+      input={input}
+      inputComponent={
         <ToolFileInput
           value={input}
           onChange={setInput}
@@ -62,16 +63,14 @@ export default function ChangeColorsInPng() {
           title={'Input PNG'}
         />
       }
-        result={
+      resultComponent={
         <ToolFileResult
           title={'Compressed PNG'}
           value={result}
           extension={'png'}
         />
       }
-      />
+      initialValues={initialValues}
-      <ToolOptions
-        compute={compute}
       getGroups={({ values, updateField }) => [
         {
           title: 'Compression options',
@@ -105,9 +104,8 @@ export default function ChangeColorsInPng() {
           )
         }
       ]}
-        initialValues={initialValues}
+      compute={compute}
-        input={input}
+      setInput={setInput}
     />
-    </Box>
   );
 }

src/pages/tools/image/png/convert-jgp-to-png/index.tsx

@@ -1,15 +1,15 @@
 import { Box } from '@mui/material';
-import ToolInputAndResult from 'components/ToolInputAndResult';
 import ToolFileInput from 'components/input/ToolFileInput';
 import CheckboxWithDesc from 'components/options/CheckboxWithDesc';
 import ColorSelector from 'components/options/ColorSelector';
 import TextFieldWithDesc from 'components/options/TextFieldWithDesc';
-import ToolOptions from 'components/options/ToolOptions';
 import ToolFileResult from 'components/result/ToolFileResult';
 import Color from 'color';
 import React, { useState } from 'react';
 import * as Yup from 'yup';
 import { areColorsSimilar } from 'utils/color';
+import ToolContent from '@components/ToolContent';
+import { ToolComponentProps } from '@tools/defineTool';
 
 const initialValues = {
   enableTransparency: false,
@@ -19,7 +19,7 @@ const initialValues = {
 const validationSchema = Yup.object({
   // splitSeparator: Yup.string().required('The separator is required')
 });
-export default function ConvertJgpToPng() {
+export default function ConvertJgpToPng({ title }: ToolComponentProps) {
   const [input, setInput] = useState<File | null>(null);
   const [result, setResult] = useState<File | null>(null);
 
@@ -97,9 +97,10 @@ export default function ConvertJgpToPng() {
   };
 
   return (
-    <Box>
+    <ToolContent
-      <ToolInputAndResult
+      title={title}
-        input={
+      input={input}
+      inputComponent={
         <ToolFileInput
           value={input}
           onChange={setInput}
@@ -107,16 +108,10 @@ export default function ConvertJgpToPng() {
           title={'Input JPG'}
         />
       }
-        result={
+      resultComponent={
-          <ToolFileResult
+        <ToolFileResult title={'Output PNG'} value={result} extension={'png'} />
-            title={'Output PNG'}
-            value={result}
-            extension={'png'}
-          />
       }
-      />
+      initialValues={initialValues}
-      <ToolOptions
-        compute={compute}
       getGroups={({ values, updateField }) => [
         {
           title: 'PNG Transparency Color',
@@ -146,9 +141,8 @@ export default function ConvertJgpToPng() {
           )
         }
       ]}
-        initialValues={initialValues}
+      compute={compute}
-        input={input}
+      setInput={setInput}
     />
-    </Box>
   );
 }

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

@@ -3,21 +3,24 @@ 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 Color from 'color';
 import TextFieldWithDesc from 'components/options/TextFieldWithDesc';
-import ToolInputAndResult from '@components/ToolInputAndResult';
 import { areColorsSimilar } from 'utils/color';
+import ToolContent from '@components/ToolContent';
+import { ToolComponentProps } from '@tools/defineTool';
+import { GetGroupsType } from '@components/options/ToolOptions';
 
 const initialValues = {
   fromColor: 'white',
   similarity: '10'
 };
+
 const validationSchema = Yup.object({
   // splitSeparator: Yup.string().required('The separator is required')
 });
-export default function ChangeColorsInPng() {
+
+export default function CreateTransparent({ title }: ToolComponentProps) {
   const [input, setInput] = useState<File | null>(null);
   const [result, setResult] = useState<File | null>(null);
 
@@ -76,28 +79,10 @@ export default function ChangeColorsInPng() {
     processImage(input, fromRgb, Number(similarity));
   };
 
-  return (
+  const getGroups: GetGroupsType<typeof initialValues> = ({
-    <Box>
+    values,
-      <ToolInputAndResult
+    updateField
-        input={
+  }) => [
-          <ToolFileInput
-            value={input}
-            onChange={setInput}
-            accept={['image/png']}
-            title={'Input PNG'}
-          />
-        }
-        result={
-          <ToolFileResult
-            title={'Transparent PNG'}
-            value={result}
-            extension={'png'}
-          />
-        }
-      />
-      <ToolOptions
-        compute={compute}
-        getGroups={({ values, updateField }) => [
     {
       title: 'From color and similarity',
       component: (
@@ -118,10 +103,36 @@ export default function ChangeColorsInPng() {
         </Box>
       )
     }
-        ]}
+  ];
-        initialValues={initialValues}
+
-        input={input}
+  return (
+    <ToolContent
+      title={title}
+      inputComponent={
+        <ToolFileInput
+          value={input}
+          onChange={setInput}
+          accept={['image/png']}
+          title={'Input PNG'}
+        />
+      }
+      resultComponent={
+        <ToolFileResult
+          title={'Transparent PNG'}
+          value={result}
+          extension={'png'}
+        />
+      }
+      initialValues={initialValues}
+      getGroups={getGroups}
+      compute={compute}
+      input={input}
+      validationSchema={validationSchema}
+      toolInfo={{
+        title: 'Create Transparent PNG',
+        description:
+          'This tool allows you to make specific colors in a PNG image transparent. You can select the color to replace and adjust the similarity threshold to include similar colors.'
+      }}
     />
-    </Box>
   );
 }

src/pages/tools/json/prettify/index.tsx

@@ -2,10 +2,7 @@ import { Box } from '@mui/material';
 import React, { useRef, useState } from 'react';
 import ToolTextInput from '@components/input/ToolTextInput';
 import ToolTextResult from '@components/result/ToolTextResult';
-import ToolOptions, { GetGroupsType } from '@components/options/ToolOptions';
 import { beautifyJson } from './service';
-import ToolInputAndResult from '@components/ToolInputAndResult';
-
 import ToolInfo from '@components/ToolInfo';
 import Separator from '@components/Separator';
 import ToolExamples, {
@@ -16,6 +13,7 @@ import { ToolComponentProps } from '@tools/defineTool';
 import RadioWithTextField from '@components/options/RadioWithTextField';
 import SimpleRadio from '@components/options/SimpleRadio';
 import { isNumber, updateNumberField } from '../../../../utils/string';
+import ToolContent from '@components/ToolContent';
 
 type InitialValuesType = {
   indentationType: 'tab' | 'space';
@@ -119,16 +117,29 @@ const exampleCards: CardExampleType<InitialValuesType>[] = [
 export default function PrettifyJson({ title }: ToolComponentProps) {
   const [input, setInput] = useState<string>('');
   const [result, setResult] = useState<string>('');
-  const formRef = useRef<FormikProps<InitialValuesType>>(null);
+
   const compute = (optionsValues: InitialValuesType, input: any) => {
     const { indentationType, spacesCount } = optionsValues;
     if (input) setResult(beautifyJson(input, indentationType, spacesCount));
   };
 
-  const getGroups: GetGroupsType<InitialValuesType> = ({
+  return (
-    values,
+    <Box>
-    updateField
+      <ToolContent
-  }) => [
+        title={title}
+        input={input}
+        inputComponent={
+          <ToolTextInput
+            title={'Input JSON'}
+            value={input}
+            onChange={setInput}
+          />
+        }
+        resultComponent={
+          <ToolTextResult title={'Pretty JSON'} value={result} />
+        }
+        initialValues={initialValues}
+        getGroups={({ values, updateField }) => [
           {
             title: 'Indentation',
             component: (
@@ -153,38 +164,16 @@ export default function PrettifyJson({ title }: ToolComponentProps) {
               </Box>
             )
           }
-  ];
+        ]}
-  return (
-    <Box>
-      <ToolInputAndResult
-        input={
-          <ToolTextInput
-            title={'Input JSON'}
-            value={input}
-            onChange={setInput}
-          />
-        }
-        result={<ToolTextResult title={'Pretty JSON'} value={result} />}
-      />
-      <ToolOptions
-        formRef={formRef}
         compute={compute}
-        getGroups={getGroups}
+        setInput={setInput}
-        initialValues={initialValues}
+        exampleCards={exampleCards}
-        input={input}
       />
       <ToolInfo
         title="What Is a JSON Prettifier?"
         description="This tool adds consistent formatting to the data in JavaScript Object Notation (JSON) format. This transformation makes the JSON code more readable, making it easier to understand and edit. The program parses the JSON data structure into tokens and then reformats them by adding indentation and line breaks. If the data is hierarchial, then it adds indentation at the beginning of lines to visually show the depth of the JSON and adds newlines to break long single-line JSON arrays into multiple shorter, more readable ones. Additionally, this utility can remove unnecessary spaces and tabs from your JSON code (especially leading and trailing whitespaces), making it more compact. You can choose the line indentation method in the options: indent with spaces or indent with tabs. When using spaces, you can also specify how many spaces to use for each indentation level (usually 2 or 4 spaces). "
       />
       <Separator backgroundColor="#5581b5" margin="50px" />
-      <ToolExamples
-        title={title}
-        exampleCards={exampleCards}
-        getGroups={getGroups}
-        formRef={formRef}
-        setInput={setInput}
-      />
     </Box>
   );
 }

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

@@ -2,18 +2,18 @@ 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 {
   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 ToolContent from '@components/ToolContent';
+import { ToolComponentProps } from '@tools/defineTool';
 
 const initialValues = {
   splitSeparatorType: 'symbol' as SplitOperatorType,
@@ -41,7 +41,7 @@ const splitOperators: {
   }
 ];
 
-export default function FindMostPopular() {
+export default function FindMostPopular({ title }: ToolComponentProps) {
   const [input, setInput] = useState<string>('');
   const [result, setResult] = useState<string>('');
   const compute = (optionsValues: typeof initialValues, input: any) => {
@@ -70,19 +70,16 @@ export default function FindMostPopular() {
   };
 
   return (
-    <Box>
+    <ToolContent
-      <ToolInputAndResult
+      title={title}
-        input={
+      input={input}
-          <ToolTextInput
+      inputComponent={
-            title={'Input list'}
+        <ToolTextInput title={'Input list'} value={input} onChange={setInput} />
-            value={input}
-            onChange={setInput}
-          />
       }
-        result={<ToolTextResult title={'Most popular items'} value={result} />}
+      resultComponent={
-      />
+        <ToolTextResult title={'Most popular items'} value={result} />
-      <ToolOptions
+      }
-        compute={compute}
+      initialValues={initialValues}
       getGroups={({ values, updateField }) => [
         {
           title: 'How to Extract List Items?',
@@ -159,9 +156,8 @@ export default function FindMostPopular() {
           )
         }
       ]}
-        initialValues={initialValues}
+      compute={compute}
-        input={input}
+      setInput={setInput}
     />
-    </Box>
   );
 }

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

@@ -2,13 +2,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 { 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 ToolContent from '@components/ToolContent';
+import { ToolComponentProps } from '@tools/defineTool';
 
 const initialValues = {
   splitOperatorType: 'symbol' as SplitOperatorType,
@@ -39,7 +39,7 @@ const splitOperators: {
   }
 ];
 
-export default function FindUnique() {
+export default function FindUnique({ title }: ToolComponentProps) {
   const [input, setInput] = useState<string>('');
   const [result, setResult] = useState<string>('');
   const compute = (optionsValues: typeof initialValues, input: any) => {
@@ -74,19 +74,16 @@ export default function FindUnique() {
   };
 
   return (
-    <Box>
+    <ToolContent
-      <ToolInputAndResult
+      title={title}
-        input={
+      input={input}
-          <ToolTextInput
+      inputComponent={
-            title={'Input list'}
+        <ToolTextInput title={'Input list'} value={input} onChange={setInput} />
-            value={input}
-            onChange={setInput}
-          />
       }
-        result={<ToolTextResult title={'Grouped items'} value={result} />}
+      resultComponent={
-      />
+        <ToolTextResult title={'Grouped items'} value={result} />
-      <ToolOptions
+      }
-        compute={compute}
+      initialValues={initialValues}
       getGroups={({ values, updateField }) => [
         {
           title: 'Input Item Separator',
@@ -175,9 +172,8 @@ export default function FindUnique() {
           )
         }
       ]}
-        initialValues={initialValues}
+      compute={compute}
-        input={input}
+      setInput={setInput}
     />
-    </Box>
   );
 }

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

@@ -2,12 +2,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 { 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 ToolContent from '@components/ToolContent';
+import { ToolComponentProps } from '@tools/defineTool';
 
 const initialValues = {
   splitOperatorType: 'symbol' as SplitOperatorType,
@@ -52,7 +52,7 @@ const rotationDirections: {
   }
 ];
 
-export default function Rotate() {
+export default function Rotate({ title }: ToolComponentProps) {
   const [input, setInput] = useState<string>('');
   const [result, setResult] = useState<string>('');
   const compute = (optionsValues: typeof initialValues, input: any) => {
@@ -72,19 +72,14 @@ export default function Rotate() {
   };
 
   return (
-    <Box>
+    <ToolContent
-      <ToolInputAndResult
+      title={title}
-        input={
+      input={input}
-          <ToolTextInput
+      inputComponent={
-            title={'Input list'}
+        <ToolTextInput title={'Input list'} value={input} onChange={setInput} />
-            value={input}
-            onChange={setInput}
-          />
       }
-        result={<ToolTextResult title={'Rotated list'} value={result} />}
+      resultComponent={<ToolTextResult title={'Rotated list'} value={result} />}
-      />
+      initialValues={initialValues}
-      <ToolOptions
-        compute={compute}
       getGroups={({ values, updateField }) => [
         {
           title: 'Item split mode',
@@ -123,9 +118,7 @@ export default function Rotate() {
               <TextFieldWithDesc
                 description={'Number of items to rotate'}
                 value={values.step}
-                  onOwnChange={(val) =>
+                onOwnChange={(val) => updateField('step', formatNumber(val, 1))}
-                    updateField('step', formatNumber(val, 1))
-                  }
               />
             </Box>
           )
@@ -145,9 +138,8 @@ export default function Rotate() {
           )
         }
       ]}
-        initialValues={initialValues}
+      compute={compute}
-        input={input}
+      setInput={setInput}
     />
-    </Box>
   );
 }

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

@@ -2,13 +2,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 { 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 ToolContent from '@components/ToolContent';
+import { ToolComponentProps } from '@tools/defineTool';
 
 const initialValues = {
   splitSeparatorType: 'symbol' as SplitOperatorType,
@@ -36,7 +36,7 @@ const splitOperators: {
   }
 ];
 
-export default function SplitText() {
+export default function SplitText({ title }: ToolComponentProps) {
   const [input, setInput] = useState<string>('');
   const [result, setResult] = useState<string>('');
   const compute = (optionsValues: typeof initialValues, input: any) => {
@@ -65,19 +65,14 @@ export default function SplitText() {
   };
 
   return (
-    <Box>
+    <ToolContent
-      <ToolInputAndResult
+      title={title}
-        input={
+      input={input}
-          <ToolTextInput
+      inputComponent={
-            title={'Input list'}
+        <ToolTextInput title={'Input list'} value={input} onChange={setInput} />
-            value={input}
-            onChange={setInput}
-          />
       }
-        result={<ToolTextResult title={'Sorted list'} value={result} />}
+      resultComponent={<ToolTextResult title={'Sorted list'} value={result} />}
-      />
+      initialValues={initialValues}
-      <ToolOptions
-        compute={compute}
       getGroups={({ values, updateField }) => [
         {
           title: 'Input item separator',
@@ -157,9 +152,8 @@ export default function SplitText() {
           )
         }
       ]}
-        initialValues={initialValues}
+      compute={compute}
-        input={input}
+      setInput={setInput}
     />
-    </Box>
   );
 }

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 { listOfIntegers } from './service';
-import ToolInputAndResult from '@components/ToolInputAndResult';
 import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
+import ToolContent from '@components/ToolContent';
+import { ToolComponentProps } from '@tools/defineTool';
 
 const initialValues = {
   firstValue: '1',
@@ -12,15 +12,26 @@ const initialValues = {
   step: '1',
   separator: '\\n'
 };
-export default function SplitText() {
+
+export default function GenerateNumbers({ title }: ToolComponentProps) {
   const [result, setResult] = useState<string>('');
 
+  const compute = (optionsValues: typeof initialValues) => {
+    const { firstValue, numberOfNumbers, separator, step } = optionsValues;
+    setResult(
+      listOfIntegers(
+        Number(firstValue),
+        Number(numberOfNumbers),
+        Number(step),
+        separator
+      )
+    );
+  };
+
   return (
-    <Box>
+    <ToolContent
-      <ToolInputAndResult
+      title={title}
-        result={<ToolTextResult title={'Total'} value={result} />}
+      initialValues={initialValues}
-      />
-      <ToolOptions
       getGroups={({ values, updateField }) => [
         {
           title: 'Arithmetic sequence option',
@@ -60,20 +71,10 @@ export default function SplitText() {
           )
         }
       ]}
-        compute={(optionsValues) => {
+      compute={compute}
-          const { firstValue, numberOfNumbers, separator, step } =
+      resultComponent={
-            optionsValues;
+        <ToolTextResult title={'Generated numbers'} value={result} />
-          setResult(
+      }
-            listOfIntegers(
-              Number(firstValue),
-              Number(numberOfNumbers),
-              Number(step),
-              separator
-            )
-          );
-        }}
-        initialValues={initialValues}
     />
-    </Box>
   );
 }

src/pages/tools/string/remove-duplicate-lines/index.tsx

@@ -2,10 +2,8 @@ import { Box } from '@mui/material';
 import React, { useRef, useState } from 'react';
 import ToolTextInput from '@components/input/ToolTextInput';
 import ToolTextResult from '@components/result/ToolTextResult';
-import ToolOptions, { GetGroupsType } from '@components/options/ToolOptions';
 import SimpleRadio from '@components/options/SimpleRadio';
 import CheckboxWithDesc from '@components/options/CheckboxWithDesc';
-import ToolInputAndResult from '@components/ToolInputAndResult';
 import ToolExamples, {
   CardExampleType
 } from '@components/examples/ToolExamples';
@@ -16,6 +14,7 @@ import removeDuplicateLines, {
   DuplicateRemoverOptions,
   NewlineOption
 } from './service';
+import ToolContent from '@components/ToolContent';
 
 // Initial values for our form
 const initialValues: DuplicateRemoverOptions = {
@@ -174,7 +173,6 @@ Elderberry`,
 export default function RemoveDuplicateLines({ title }: ToolComponentProps) {
   const [input, setInput] = useState<string>('');
   const [result, setResult] = useState<string>('');
-  const formRef = useRef<FormikProps<typeof initialValues>>(null);
 
   const computeExternal = (
     optionsValues: typeof initialValues,
@@ -183,10 +181,16 @@ export default function RemoveDuplicateLines({ title }: ToolComponentProps) {
     setResult(removeDuplicateLines(inputText, optionsValues));
   };
 
-  const getGroups: GetGroupsType<typeof initialValues> = ({
+  return (
-    values,
+    <ToolContent
-    updateField
+      title={title}
-  }) => [
+      input={input}
+      inputComponent={<ToolTextInput value={input} onChange={setInput} />}
+      resultComponent={
+        <ToolTextResult title={'Text without duplicates'} value={result} />
+      }
+      initialValues={initialValues}
+      getGroups={({ values, updateField }) => [
         {
           title: 'Operation Mode',
           component: operationModes.map(({ title, description, value }) => (
@@ -232,29 +236,10 @@ export default function RemoveDuplicateLines({ title }: ToolComponentProps) {
             />
           ]
         }
-  ];
+      ]}
-
-  return (
-    <Box>
-      <ToolInputAndResult
-        input={<ToolTextInput value={input} onChange={setInput} />}
-        result={
-          <ToolTextResult title={'Text without duplicates'} value={result} />
-        }
-      />
-      <ToolOptions
       compute={computeExternal}
-        getGroups={getGroups}
-        initialValues={initialValues}
-        input={input}
-      />
-      <ToolExamples
-        title={title}
-        exampleCards={exampleCards}
-        getGroups={getGroups}
-        formRef={formRef}
       setInput={setInput}
+      exampleCards={exampleCards}
     />
-    </Box>
   );
 }

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

@@ -2,16 +2,15 @@ import { Box } from '@mui/material';
 import React, { useRef, useState } from 'react';
 import ToolTextInput from '@components/input/ToolTextInput';
 import ToolTextResult from '@components/result/ToolTextResult';
-import ToolOptions, { GetGroupsType } 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 ToolExamples, {
   CardExampleType
 } from '@components/examples/ToolExamples';
 import { ToolComponentProps } from '@tools/defineTool';
 import { FormikProps } from 'formik';
+import ToolContent from '@components/ToolContent';
 
 const initialValues = {
   splitSeparatorType: 'symbol' as SplitOperatorType,
@@ -135,8 +134,11 @@ easy`,
 export default function SplitText({ title }: ToolComponentProps) {
   const [input, setInput] = useState<string>('');
   const [result, setResult] = useState<string>('');
-  const formRef = useRef<FormikProps<typeof initialValues>>(null);
+
-  const computeExternal = (optionsValues: typeof initialValues, input: any) => {
+  const computeExternal = (
+    optionsValues: typeof initialValues,
+    input: string
+  ) => {
     const {
       splitSeparatorType,
       outputSeparator,
@@ -163,10 +165,14 @@ export default function SplitText({ title }: ToolComponentProps) {
     );
   };
 
-  const getGroups: GetGroupsType<typeof initialValues> = ({
+  return (
-    values,
+    <ToolContent
-    updateField
+      title={title}
-  }) => [
+      input={input}
+      inputComponent={<ToolTextInput value={input} onChange={setInput} />}
+      resultComponent={<ToolTextResult title={'Text pieces'} value={result} />}
+      initialValues={initialValues}
+      getGroups={({ values, updateField }) => [
         {
           title: 'Split separator options',
           component: splitOperators.map(({ title, description, type }) => (
@@ -193,26 +199,10 @@ export default function SplitText({ title }: ToolComponentProps) {
             />
           ))
         }
-  ];
+      ]}
-  return (
-    <Box>
-      <ToolInputAndResult
-        input={<ToolTextInput value={input} onChange={setInput} />}
-        result={<ToolTextResult title={'Text pieces'} value={result} />}
-      />
-      <ToolOptions
       compute={computeExternal}
-        getGroups={getGroups}
-        initialValues={initialValues}
-        input={input}
-      />
-      <ToolExamples
-        title={title}
-        exampleCards={exampleCards}
-        getGroups={getGroups}
-        formRef={formRef}
       setInput={setInput}
+      exampleCards={exampleCards}
     />
-    </Box>
   );
 }

src/pages/tools/video/gif/change-speed/index.tsx

@@ -3,12 +3,12 @@ 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 TextFieldWithDesc from 'components/options/TextFieldWithDesc';
-import ToolInputAndResult from '@components/ToolInputAndResult';
 import Typography from '@mui/material/Typography';
 import { FrameOptions, GifReader, GifWriter } from 'omggif';
-import { gifBinaryToFile } from '../../../../../utils/gif';
+import { gifBinaryToFile } from '@utils/gif';
+import ToolContent from '@components/ToolContent';
+import { ToolComponentProps } from '@tools/defineTool';
 
 const initialValues = {
   newSpeed: 200
@@ -16,11 +16,11 @@ const initialValues = {
 const validationSchema = Yup.object({
   // splitSeparator: Yup.string().required('The separator is required')
 });
-export default function ChangeSpeed() {
+export default function ChangeSpeed({ title }: ToolComponentProps) {
   const [input, setInput] = useState<File | null>(null);
   const [result, setResult] = useState<File | null>(null);
 
-  const compute = (optionsValues: typeof initialValues, input: File) => {
+  const compute = (optionsValues: typeof initialValues, input: File | null) => {
     if (!input) return;
     const { newSpeed } = optionsValues;
 
@@ -104,9 +104,10 @@ export default function ChangeSpeed() {
     processImage(input, newSpeed);
   };
   return (
-    <Box>
+    <ToolContent
-      <ToolInputAndResult
+      title={title}
-        input={
+      input={input}
+      inputComponent={
         <ToolFileInput
           value={input}
           onChange={setInput}
@@ -114,16 +115,14 @@ export default function ChangeSpeed() {
           title={'Input GIF'}
         />
       }
-        result={
+      resultComponent={
         <ToolFileResult
           title={'Output GIF with new speed'}
           value={result}
           extension={'gif'}
         />
       }
-      />
+      initialValues={initialValues}
-      <ToolOptions
-        compute={compute}
       getGroups={({ values, updateField }) => [
         {
           title: 'New GIF speed',
@@ -140,9 +139,8 @@ export default function ChangeSpeed() {
           )
         }
       ]}
-        initialValues={initialValues}
+      compute={compute}
-        input={input}
+      setInput={setInput}
     />
-    </Box>
   );
 }