diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 1067e7d..4993e59 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,9 +4,15 @@
-
+
+
-
+
+
+
+
+
+
@@ -35,38 +41,39 @@
- {
+ "keyToString": {
+ "ASKED_ADD_EXTERNAL_FILES": "true",
+ "ASKED_SHARE_PROJECT_CONFIGURATION_FILES": "true",
+ "RunOnceActivity.OpenProjectViewOnStart": "true",
+ "RunOnceActivity.ShowReadmeOnStart": "true",
+ "Vitest.compute function (1).executor": "Run",
+ "Vitest.compute function.executor": "Run",
+ "Vitest.mergeText.executor": "Run",
+ "Vitest.mergeText.should merge lines and preserve blank lines when deleteBlankLines is false.executor": "Run",
+ "Vitest.mergeText.should merge lines, preserve blank lines and trailing spaces when both deleteBlankLines and deleteTrailingSpaces are false.executor": "Run",
+ "git-widget-placeholder": "main",
+ "ignore.virus.scanning.warn.message": "true",
+ "kotlin-language-version-configured": "true",
+ "last_opened_file_path": "C:/Users/HP/IdeaProjects/omni-tools/src/assets",
+ "node.js.detected.package.eslint": "true",
+ "node.js.detected.package.tslint": "true",
+ "node.js.selected.package.eslint": "(autodetect)",
+ "node.js.selected.package.tslint": "(autodetect)",
+ "nodejs_package_manager_path": "npm",
+ "npm.dev.executor": "Run",
+ "npm.prebuild.executor": "Run",
+ "npm.script:create:tool.executor": "Run",
+ "npm.test.executor": "Run",
+ "prettierjs.PrettierConfiguration.Package": "C:\\Users\\HP\\IdeaProjects\\omni-tools\\node_modules\\prettier",
+ "project.structure.last.edited": "Problems",
+ "project.structure.proportion": "0.0",
+ "project.structure.side.proportion": "0.2",
+ "settings.editor.selected.configurable": "settings.typescriptcompiler",
+ "ts.external.directory.path": "C:\\Users\\HP\\IdeaProjects\\omni-tools\\node_modules\\typescript\\lib",
+ "vue.rearranger.settings.migration": "true"
}
-}]]>
+}
-
+
@@ -149,9 +156,9 @@
+
@@ -179,23 +186,8 @@
-
-
-
-
- 1718828318468
-
-
-
- 1718828318468
-
-
-
- 1718831745853
-
-
-
- 1718831745853
+
+
@@ -573,7 +565,23 @@
1719282009150
-
+
+
+ 1719282131977
+
+
+
+ 1719282131977
+
+
+
+ 1719283122691
+
+
+
+ 1719283122691
+
+
@@ -594,7 +602,6 @@
-
@@ -609,7 +616,6 @@
-
@@ -619,7 +625,9 @@
-
+
+
+
diff --git a/src/components/ToolInputAndResult.tsx b/src/components/ToolInputAndResult.tsx
new file mode 100644
index 0000000..b34999c
--- /dev/null
+++ b/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 (
+
+
+ {input}
+
+
+ {result}
+
+
+ );
+}
diff --git a/src/components/options/ToolOptionGroups.tsx b/src/components/options/ToolOptionGroups.tsx
index a2abd8a..76c48f9 100644
--- a/src/components/options/ToolOptionGroups.tsx
+++ b/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 (
diff --git a/src/pages/image/png/change-colors-in-png/index.tsx b/src/pages/image/png/change-colors-in-png/index.tsx
index 99a406d..621a259 100644
--- a/src/pages/image/png/change-colors-in-png/index.tsx
+++ b/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 (
-
-
+
-
-
+ }
+ result={
-
-
+ }
+ />
{}}
>
{({ setFieldValue, values }) => (
-
+
{input && }
-
- From color and to color
- setFieldValue('fromColor', val)}
- description={'Replace this color (from color)'}
- />
- setFieldValue('toColor', val)}
- description={'With this color (to color)'}
- />
- 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.'
+
+ setFieldValue('fromColor', val)}
+ description={'Replace this color (from color)'}
+ />
+ setFieldValue('toColor', val)}
+ description={'With this color (to color)'}
+ />
+ 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.'
+ }
+ />
+
+ )
}
- />
-
-
-
+ ]}
+ />
+
)}
diff --git a/src/pages/number/sum/index.tsx b/src/pages/number/sum/index.tsx
index ff5ef96..c5c5fd5 100644
--- a/src/pages/number/sum/index.tsx
+++ b/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 (
-
-
-
-
-
-
-
-
+ }
+ result={}
+ />
-
-
+
-
-
-
-
-
+ }
+ result={}
+ />
-
-
-
-
-
-
-
-
+ }
+ result={}
+ />
-
-
-
-
-
-
-
-
+ }
+ result={}
+ />