feat: change gif speed

src/components/Hero.tsx

@@ -14,7 +14,7 @@ const exampleTools: { label: string; url: string }[] = [
     url: '/png/create-transparent'
   },
   { label: 'Convert text to morse code', url: '/string/to-morse' },
-  { label: 'Change GIF speed', url: '' },
+  { label: 'Change GIF speed', url: '/gif/change-speed' },
   { label: 'Pick a random item', url: '' },
   { label: 'Find and replace text', url: '' },
   { label: 'Convert emoji to image', url: '' },

src/components/Separator.tsx

@@ -0,0 +1,23 @@
+import { Divider } from '@mui/material';
+import React from 'react';
+
+type SeparatorProps = {
+  backgroundColor: string;
+  margin: string;
+};
+
+export default function Separator({ backgroundColor, margin }: SeparatorProps) {
+  return (
+    <Divider
+      orientation="horizontal"
+      variant="fullWidth"
+      className="my-4"
+      sx={{
+        backgroundColor: backgroundColor,
+        height: '2px',
+        marginTop: margin,
+        marginBottom: margin
+      }}
+    />
+  );
+}

src/components/ToolLayout.tsx

@@ -2,7 +2,7 @@ import { Box } from '@mui/material';
 import React, { ReactNode } from 'react';
 import { Helmet } from 'react-helmet';
 import ToolHeader from './ToolHeader';
-import Separator from '@tools/Separator';
+import Separator from './Separator';
 import AllTools from './allTools/AllTools';
 import { getToolsByCategory } from '@tools/index';
 import { capitalizeFirstLetter } from '../utils/string';

src/components/options/RadioWithTextField.tsx

@@ -34,7 +34,10 @@ const RadioWithTextField = <T,>({
       />
       <TextFieldWithDesc
         value={value}
-        onChange={onTextChange}
+        onChange={(val) => {
+          if (typeof val === 'string') onTextChange(val);
+          else onTextChange(val.target.value);
+        }}
         description={description}
       />
     </Box>

src/components/options/TextFieldWithDesc.tsx

@@ -1,18 +1,20 @@
-import { Box, TextField } from '@mui/material';
+import { Box, TextField, TextFieldProps } from '@mui/material';
 import Typography from '@mui/material/Typography';
 import React from 'react';
 
+type OwnProps = {
+  description: string;
+  value: string | number;
+  onChange: (value: string) => void;
+  placeholder?: string;
+};
 const TextFieldWithDesc = ({
   description,
   value,
   onChange,
-  placeholder
-}: {
-  description: string;
-  value: string;
-  onChange: (value: string) => void;
-  placeholder?: string;
-}) => {
+  placeholder,
+  ...props
+}: TextFieldProps & OwnProps) => {
   return (
     <Box>
       <TextField
@@ -20,6 +22,7 @@ const TextFieldWithDesc = ({
         sx={{ backgroundColor: 'white' }}
         value={value}
         onChange={(event) => onChange(event.target.value)}
+        {...props}
       />
       <Typography fontSize={12} mt={1}>
         {description}

src/components/options/ToolOptions.tsx

@@ -6,6 +6,28 @@ import { Formik, FormikProps, FormikValues, useFormikContext } from 'formik';
 import ToolOptionGroups, { ToolOptionGroup } from './ToolOptionGroups';
 import { CustomSnackBarContext } from '../../contexts/CustomSnackBarContext';
 
+const FormikListenerComponent = <T,>({
+  initialValues,
+  input,
+  compute
+}: {
+  initialValues: T;
+  input: any;
+  compute: (optionsValues: T, input: any) => void;
+}) => {
+  const { values } = useFormikContext<typeof initialValues>();
+  const { showSnackBar } = useContext(CustomSnackBarContext);
+
+  useEffect(() => {
+    try {
+      if (values && input) compute(values, input);
+    } catch (exception: unknown) {
+      if (exception instanceof Error) showSnackBar(exception.message, 'error');
+    }
+  }, [values, input]);
+
+  return null; // This component doesn't render anything
+};
 export default function ToolOptions<T extends FormikValues>({
   children,
   initialValues,
@@ -24,21 +46,7 @@ export default function ToolOptions<T extends FormikValues>({
   formRef?: RefObject<FormikProps<T>>;
 }) {
   const theme = useTheme();
-  const FormikListenerComponent = () => {
-    const { values } = useFormikContext<typeof initialValues>();
-    const { showSnackBar } = useContext(CustomSnackBarContext);
 
-    useEffect(() => {
-      try {
-        compute(values, input);
-      } catch (exception: unknown) {
-        if (exception instanceof Error)
-          showSnackBar(exception.message, 'error');
-      }
-    }, [values, showSnackBar]);
-
-    return null; // This component doesn't render anything
-  };
   return (
     <Box
       sx={{
@@ -62,7 +70,11 @@ export default function ToolOptions<T extends FormikValues>({
         >
           {(formikProps) => (
             <Stack direction={'row'} spacing={2}>
-              <FormikListenerComponent />
+              <FormikListenerComponent
+                compute={compute}
+                input={input}
+                initialValues={initialValues}
+              />
               <ToolOptionGroups groups={getGroups(formikProps)} />
               {children}
             </Stack>