refactor: tool input and result

src/components/ToolInputAndResult.tsx

@@ -0,0 +1,21 @@
+import React, { ReactNode } from 'react';
+import Grid from '@mui/material/Grid';
+
+export default function ToolInputAndResult({
+  input,
+  result
+}: {
+  input: ReactNode;
+  result: ReactNode;
+}) {
+  return (
+    <Grid container spacing={2}>
+      <Grid item xs={6}>
+        {input}
+      </Grid>
+      <Grid item xs={6}>
+        {result}
+      </Grid>
+    </Grid>
+  );
+}

src/components/options/ToolOptionGroups.tsx

@@ -2,10 +2,15 @@ import Typography from '@mui/material/Typography';
 import React, { ReactNode } from 'react';
 import { Box, Stack } from '@mui/material';
 
+interface ToolOptionGroup {
+  title: string;
+  component: ReactNode;
+}
+
 export default function ToolOptionGroups({
   groups
 }: {
-  groups: { title: string; component: ReactNode }[];
+  groups: ToolOptionGroup[];
 }) {
   return (
     <Stack direction={'row'} spacing={2}>

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

@@ -1,15 +1,15 @@
-import { Box, Stack } from '@mui/material';
+import { Box } from '@mui/material';
 import React, { useEffect, useState } from 'react';
 import * as Yup from 'yup';
-import Grid from '@mui/material/Grid';
 import ToolFileInput from '../../../../components/input/ToolFileInput';
 import ToolFileResult from '../../../../components/result/ToolFileResult';
 import ToolOptions from '../../../../components/options/ToolOptions';
-import Typography from '@mui/material/Typography';
 import { Formik, useFormikContext } from 'formik';
 import ColorSelector from '../../../../components/options/ColorSelector';
 import Color from 'color';
 import TextFieldWithDesc from 'components/options/TextFieldWithDesc';
+import ToolInputAndResult from '../../../../components/ToolInputAndResult';
+import ToolOptionGroups from '../../../../components/options/ToolOptionGroups';
 
 const initialValues = {
   fromColor: 'white',
@@ -105,23 +105,23 @@ export default function ChangeColorsInPng() {
 
   return (
     <Box>
-      <Grid container spacing={2}>
-        <Grid item xs={6}>
+      <ToolInputAndResult
+        input={
           <ToolFileInput
             value={input}
             onChange={setInput}
             accept={['image/png']}
             title={'Input PNG'}
           />
-        </Grid>
-        <Grid item xs={6}>
+        }
+        result={
           <ToolFileResult
             title={'Output PNG with new colors'}
             value={result}
             extension={'png'}
           />
-        </Grid>
-      </Grid>
+        }
+      />
       <ToolOptions>
         <Formik
           initialValues={initialValues}
@@ -129,30 +129,37 @@ export default function ChangeColorsInPng() {
           onSubmit={() => {}}
         >
           {({ setFieldValue, values }) => (
-            <Stack direction={'row'} spacing={2}>
+            <Box>
               {input && <FormikListenerComponent input={input} />}
-              <Box>
-                <Typography fontSize={22}>From color and to color</Typography>
-                <ColorSelector
-                  value={values.fromColor}
-                  onChange={(val) => setFieldValue('fromColor', val)}
-                  description={'Replace this color (from color)'}
-                />
-                <ColorSelector
-                  value={values.toColor}
-                  onChange={(val) => setFieldValue('toColor', val)}
-                  description={'With this color (to color)'}
-                />
-                <TextFieldWithDesc
-                  value={values.similarity}
-                  onChange={(val) => setFieldValue('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.'
+              <ToolOptionGroups
+                groups={[
+                  {
+                    title: 'From color and to color',
+                    component: (
+                      <Box>
+                        <ColorSelector
+                          value={values.fromColor}
+                          onChange={(val) => setFieldValue('fromColor', val)}
+                          description={'Replace this color (from color)'}
+                        />
+                        <ColorSelector
+                          value={values.toColor}
+                          onChange={(val) => setFieldValue('toColor', val)}
+                          description={'With this color (to color)'}
+                        />
+                        <TextFieldWithDesc
+                          value={values.similarity}
+                          onChange={(val) => setFieldValue('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>
+                    )
                   }
-                />
-              </Box>
-              <Box></Box>
-            </Stack>
+                ]}
+              />
+            </Box>
           )}
         </Formik>
       </ToolOptions>

src/pages/number/sum/index.tsx

@@ -12,6 +12,7 @@ import RadioWithTextField from '../../../components/options/RadioWithTextField';
 import ToolOptionGroups from '../../../components/options/ToolOptionGroups';
 import SimpleRadio from '../../../components/options/SimpleRadio';
 import CheckboxWithDesc from '../../../components/options/CheckboxWithDesc';
+import ToolInputAndResult from '../../../components/ToolInputAndResult';
 
 const initialValues = {
   extractionType: 'smart' as NumberExtractionType,
@@ -69,14 +70,10 @@ export default function SplitText() {
 
   return (
     <Box>
-      <Grid container spacing={2}>
-        <Grid item xs={6}>
-          <ToolTextInput value={input} onChange={setInput} />
-        </Grid>
-        <Grid item xs={6}>
-          <ToolTextResult title={'Text pieces'} value={result} />
-        </Grid>
-      </Grid>
+      <ToolInputAndResult
+        input={<ToolTextInput value={input} onChange={setInput} />}
+        result={<ToolTextResult title={'Total'} value={result} />}
+      />
       <ToolOptions>
         <Formik
           initialValues={initialValues}

src/pages/string/join/index.tsx

@@ -10,6 +10,7 @@ import { CustomSnackBarContext } from '../../../contexts/CustomSnackBarContext';
 import TextFieldWithDesc from '../../../components/options/TextFieldWithDesc';
 import CheckboxWithDesc from '../../../components/options/CheckboxWithDesc';
 import ToolOptionGroups from '../../../components/options/ToolOptionGroups';
+import ToolInputAndResult from '../../../components/ToolInputAndResult';
 
 const initialValues = {
   joinCharacter: '',
@@ -70,18 +71,16 @@ export default function JoinText() {
 
   return (
     <Box>
-      <Grid container spacing={2}>
-        <Grid item xs={6}>
+      <ToolInputAndResult
+        input={
           <ToolTextInput
             title={'Text Pieces'}
             value={input}
             onChange={setInput}
           />
-        </Grid>
-        <Grid item xs={6}>
-          <ToolTextResult title={'Joined Text'} value={result} />
-        </Grid>
-      </Grid>
+        }
+        result={<ToolTextResult title={'Joined Text'} value={result} />}
+      />
       <ToolOptions>
         <Formik
           initialValues={initialValues}

src/pages/string/split/index.tsx

@@ -11,6 +11,7 @@ import { CustomSnackBarContext } from '../../../contexts/CustomSnackBarContext';
 import RadioWithTextField from '../../../components/options/RadioWithTextField';
 import TextFieldWithDesc from '../../../components/options/TextFieldWithDesc';
 import ToolOptionGroups from '../../../components/options/ToolOptionGroups';
+import ToolInputAndResult from '../../../components/ToolInputAndResult';
 
 const initialValues = {
   splitSeparatorType: 'symbol' as SplitOperatorType,
@@ -126,14 +127,10 @@ export default function SplitText() {
 
   return (
     <Box>
-      <Grid container spacing={2}>
-        <Grid item xs={6}>
-          <ToolTextInput value={input} onChange={setInput} />
-        </Grid>
-        <Grid item xs={6}>
-          <ToolTextResult title={'Text pieces'} value={result} />
-        </Grid>
-      </Grid>
+      <ToolInputAndResult
+        input={<ToolTextInput value={input} onChange={setInput} />}
+        result={<ToolTextResult title={'Text pieces'} value={result} />}
+      />
       <ToolOptions>
         <Formik
           initialValues={initialValues}

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

@@ -10,6 +10,7 @@ import { compute } from './service';
 import { CustomSnackBarContext } from '../../../contexts/CustomSnackBarContext';
 import TextFieldWithDesc from '../../../components/options/TextFieldWithDesc';
 import ToolOptionGroups from '../../../components/options/ToolOptionGroups';
+import ToolInputAndResult from '../../../components/ToolInputAndResult';
 
 const initialValues = {
   dotSymbol: '.',
@@ -44,14 +45,10 @@ export default function ToMorse() {
 
   return (
     <Box>
-      <Grid container spacing={2}>
-        <Grid item xs={6}>
-          <ToolTextInput value={input} onChange={setInput} />
-        </Grid>
-        <Grid item xs={6}>
-          <ToolTextResult title={'Morse code'} value={result} />
-        </Grid>
-      </Grid>
+      <ToolInputAndResult
+        input={<ToolTextInput value={input} onChange={setInput} />}
+        result={<ToolTextResult title={'Morse code'} value={result} />}
+      />
       <ToolOptions>
         <Formik
           initialValues={initialValues}