refactor: tool options components

src/components/options/CheckboxWithDesc.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Box, Checkbox, FormControlLabel, Typography } from '@mui/material';
+
+const CheckboxWithDesc = ({
+  title,
+  description,
+  checked,
+  onChange
+}: {
+  title: string;
+  description: string;
+  checked: boolean;
+  onChange: (value: boolean) => void;
+}) => {
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    onChange(event.target.checked);
+  };
+
+  return (
+    <Box>
+      <FormControlLabel
+        control={
+          <Checkbox defaultChecked checked={checked} onChange={handleChange} />
+        }
+        label={title}
+      />
+      <Typography fontSize={12} mt={1}>
+        {description}
+      </Typography>
+    </Box>
+  );
+};
+
+export default CheckboxWithDesc;

src/components/options/RadioWithTextField.tsx

@@ -0,0 +1,46 @@
+import { SplitOperatorType } from '../../pages/string/split/service';
+import { Box, Stack } from '@mui/material';
+import { Field } from 'formik';
+import Typography from '@mui/material/Typography';
+import React from 'react';
+import TextFieldWithDesc from './TextFieldWithDesc';
+
+const RadioWithTextField = <T,>({
+  fieldName,
+  type,
+  title,
+  onTypeChange,
+  value,
+  description,
+  onTextChange
+}: {
+  fieldName: string;
+  title: string;
+  type: T;
+  onTypeChange: (val: T) => void;
+  value: string;
+  description: string;
+  onTextChange: (value: string) => void;
+}) => {
+  const onChange = () => onTypeChange(type);
+  return (
+    <Box>
+      <Stack
+        direction={'row'}
+        sx={{ mt: 2, mb: 1, cursor: 'pointer' }}
+        onClick={onChange}
+        alignItems={'center'}
+        spacing={1}
+      >
+        <Field type="radio" name={fieldName} value={type} onChange={onChange} />
+        <Typography>{title}</Typography>
+      </Stack>
+      <TextFieldWithDesc
+        value={value}
+        onChange={onTextChange}
+        description={description}
+      />
+    </Box>
+  );
+};
+export default RadioWithTextField;

src/components/options/TextFieldWithDesc.tsx

@@ -0,0 +1,31 @@
+import { Box, TextField } from '@mui/material';
+import Typography from '@mui/material/Typography';
+import React from 'react';
+
+const TextFieldWithDesc = ({
+  description,
+  value,
+  onChange,
+  placeholder
+}: {
+  description: string;
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+}) => {
+  return (
+    <Box>
+      <TextField
+        placeholder={placeholder}
+        sx={{ backgroundColor: 'white' }}
+        value={value}
+        onChange={(event) => onChange(event.target.value)}
+      />
+      <Typography fontSize={12} mt={1}>
+        {description}
+      </Typography>
+    </Box>
+  );
+};
+
+export default TextFieldWithDesc;

src/components/options/ToolOptions.tsx

@@ -0,0 +1,25 @@
+import { Box, Stack, useTheme } from '@mui/material';
+import SettingsIcon from '@mui/icons-material/Settings';
+import Typography from '@mui/material/Typography';
+import React, { ReactNode } from 'react';
+
+export default function ToolOptions({ children }: { children: ReactNode }) {
+  const theme = useTheme();
+  return (
+    <Box
+      sx={{
+        mb: 2,
+        borderRadius: 2,
+        padding: 2,
+        backgroundColor: theme.palette.background.default
+      }}
+      mt={2}
+    >
+      <Stack direction={'row'} spacing={1} alignItems={'center'}>
+        <SettingsIcon />
+        <Typography fontSize={22}>Tool options</Typography>
+      </Stack>
+      <Box mt={2}>{children}</Box>
+    </Box>
+  );
+}