refactor: use ToolContent

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,62 +52,60 @@ export default function ChangeColorsInPng() {
   };
 
   return (
-    <Box>
-      <ToolInputAndResult
-        input={
-          <ToolFileInput
-            value={input}
-            onChange={setInput}
-            accept={['image/png']}
-            title={'Input PNG'}
-          />
-        }
-        result={
-          <ToolFileResult
-            title={'Compressed PNG'}
-            value={result}
-            extension={'png'}
-          />
-        }
-      />
-      <ToolOptions
-        compute={compute}
-        getGroups={({ values, updateField }) => [
-          {
-            title: 'Compression options',
-            component: (
+    <ToolContent
+      title={title}
+      input={input}
+      inputComponent={
+        <ToolFileInput
+          value={input}
+          onChange={setInput}
+          accept={['image/png']}
+          title={'Input PNG'}
+        />
+      }
+      resultComponent={
+        <ToolFileResult
+          title={'Compressed PNG'}
+          value={result}
+          extension={'png'}
+        />
+      }
+      initialValues={initialValues}
+      getGroups={({ values, updateField }) => [
+        {
+          title: 'Compression options',
+          component: (
+            <Box>
+              <TextFieldWithDesc
+                value={values.rate}
+                onOwnChange={(val) => updateField('rate', val)}
+                description={'Compression rate (1-100)'}
+              />
+            </Box>
+          )
+        },
+        {
+          title: 'File sizes',
+          component: (
+            <Box>
               <Box>
-                <TextFieldWithDesc
-                  value={values.rate}
-                  onOwnChange={(val) => updateField('rate', val)}
-                  description={'Compression rate (1-100)'}
-                />
+                {originalSize !== null && (
+                  <Typography>
+                    Original Size: {(originalSize / 1024).toFixed(2)} KB
+                  </Typography>
+                )}
+                {compressedSize !== null && (
+                  <Typography>
+                    Compressed Size: {(compressedSize / 1024).toFixed(2)} KB
+                  </Typography>
+                )}
               </Box>
-            )
-          },
-          {
-            title: 'File sizes',
-            component: (
-              <Box>
-                <Box>
-                  {originalSize !== null && (
-                    <Typography>
-                      Original Size: {(originalSize / 1024).toFixed(2)} KB
-                    </Typography>
-                  )}
-                  {compressedSize !== null && (
-                    <Typography>
-                      Compressed Size: {(compressedSize / 1024).toFixed(2)} KB
-                    </Typography>
-                  )}
-                </Box>
-              </Box>
-            )
-          }
-        ]}
-        initialValues={initialValues}
-        input={input}
-      />
-    </Box>
+            </Box>
+          )
+        }
+      ]}
+      compute={compute}
+      setInput={setInput}
+    />
   );
 }

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,58 +97,52 @@ export default function ConvertJgpToPng() {
   };
 
   return (
-    <Box>
-      <ToolInputAndResult
-        input={
-          <ToolFileInput
-            value={input}
-            onChange={setInput}
-            accept={['image/jpeg']}
-            title={'Input JPG'}
-          />
+    <ToolContent
+      title={title}
+      input={input}
+      inputComponent={
+        <ToolFileInput
+          value={input}
+          onChange={setInput}
+          accept={['image/jpeg']}
+          title={'Input JPG'}
+        />
+      }
+      resultComponent={
+        <ToolFileResult title={'Output PNG'} value={result} extension={'png'} />
+      }
+      initialValues={initialValues}
+      getGroups={({ values, updateField }) => [
+        {
+          title: 'PNG Transparency Color',
+          component: (
+            <Box>
+              <CheckboxWithDesc
+                key="enableTransparency"
+                title="Enable PNG Transparency"
+                checked={!!values.enableTransparency}
+                onChange={(value) => updateField('enableTransparency', value)}
+                description="Make the color below transparent."
+              />
+              <ColorSelector
+                value={values.color}
+                onColorChange={(val) => updateField('color', val)}
+                description={'With this color (to color)'}
+                inputProps={{ 'data-testid': 'color-input' }}
+              />
+              <TextFieldWithDesc
+                value={values.similarity}
+                onOwnChange={(val) => updateField('similarity', val)}
+                description={
+                  'Match this % of similar. For example, 10% white will match white and a little bit of gray.'
+                }
+              />
+            </Box>
+          )
         }
-        result={
-          <ToolFileResult
-            title={'Output PNG'}
-            value={result}
-            extension={'png'}
-          />
-        }
-      />
-      <ToolOptions
-        compute={compute}
-        getGroups={({ values, updateField }) => [
-          {
-            title: 'PNG Transparency Color',
-            component: (
-              <Box>
-                <CheckboxWithDesc
-                  key="enableTransparency"
-                  title="Enable PNG Transparency"
-                  checked={!!values.enableTransparency}
-                  onChange={(value) => updateField('enableTransparency', value)}
-                  description="Make the color below transparent."
-                />
-                <ColorSelector
-                  value={values.color}
-                  onColorChange={(val) => updateField('color', val)}
-                  description={'With this color (to color)'}
-                  inputProps={{ 'data-testid': 'color-input' }}
-                />
-                <TextFieldWithDesc
-                  value={values.similarity}
-                  onOwnChange={(val) => updateField('similarity', val)}
-                  description={
-                    'Match this % of similar. For example, 10% white will match white and a little bit of gray.'
-                  }
-                />
-              </Box>
-            )
-          }
-        ]}
-        initialValues={initialValues}
-        input={input}
-      />
-    </Box>
+      ]}
+      compute={compute}
+      setInput={setInput}
+    />
   );
 }

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,52 +79,60 @@ export default function ChangeColorsInPng() {
     processImage(input, fromRgb, Number(similarity));
   };
 
+  const getGroups: GetGroupsType<typeof initialValues> = ({
+    values,
+    updateField
+  }) => [
+    {
+      title: 'From color and similarity',
+      component: (
+        <Box>
+          <ColorSelector
+            value={values.fromColor}
+            onColorChange={(val) => updateField('fromColor', val)}
+            description={'Replace this color (from color)'}
+            inputProps={{ 'data-testid': 'color-input' }}
+          />
+          <TextFieldWithDesc
+            value={values.similarity}
+            onOwnChange={(val) => updateField('similarity', val)}
+            description={
+              'Match this % of similar colors of the from color. For example, 10% white will match white and a little bit of gray.'
+            }
+          />
+        </Box>
+      )
+    }
+  ];
+
   return (
-    <Box>
-      <ToolInputAndResult
-        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: (
-              <Box>
-                <ColorSelector
-                  value={values.fromColor}
-                  onColorChange={(val) => updateField('fromColor', val)}
-                  description={'Replace this color (from color)'}
-                  inputProps={{ 'data-testid': 'color-input' }}
-                />
-                <TextFieldWithDesc
-                  value={values.similarity}
-                  onOwnChange={(val) => updateField('similarity', val)}
-                  description={
-                    'Match this % of similar colors of the from color. For example, 10% white will match white and a little bit of gray.'
-                  }
-                />
-              </Box>
-            )
-          }
-        ]}
-        initialValues={initialValues}
-        input={input}
-      />
-    </Box>
+    <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.'
+      }}
+    />
   );
 }