chore: rotation options

src/pages/tools-by-category/index.tsx

@@ -8,6 +8,10 @@ import { capitalizeFirstLetter } from '@utils/string';
 import { Icon } from '@iconify/react';
 import { categoriesColors } from 'config/uiConfig';
 import React, { useEffect } from 'react';
+import IconButton from '@mui/material/IconButton';
+import { ArrowBack } from '@mui/icons-material';
+import BackButton from '@components/BackButton';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 
 export default function Home() {
   const navigate = useNavigate();
@@ -35,10 +39,15 @@ export default function Home() {
       </Box>
       <Divider sx={{ borderColor: theme.palette.primary.main }} />
       <Box ref={mainContentRef} mt={3} ml={{ xs: 1, md: 2, lg: 3 }} padding={3}>
-        <Typography
-          fontSize={22}
-          color={theme.palette.primary.main}
-        >{`All ${capitalizeFirstLetter(categoryName)} Tools`}</Typography>
+        <Stack direction={'row'} alignItems={'center'} spacing={1}>
+          <IconButton onClick={() => navigate('/')}>
+            <ArrowBackIcon color={'primary'} />
+          </IconButton>
+          <Typography
+            fontSize={22}
+            color={theme.palette.primary.main}
+          >{`All ${capitalizeFirstLetter(categoryName)} Tools`}</Typography>
+        </Stack>
         <Grid container spacing={2} mt={2}>
           {getToolsByCategory()
             .find(({ type }) => type === categoryName)

src/pages/tools/video/rotate/index.tsx

@@ -1,15 +1,15 @@
 import { Box } from '@mui/material';
-import { useCallback, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import * as Yup from 'yup';
 import ToolFileResult from '@components/result/ToolFileResult';
 import ToolContent from '@components/ToolContent';
 import { ToolComponentProps } from '@tools/defineTool';
 import { GetGroupsType } from '@components/options/ToolOptions';
-import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
-import { updateNumberField } from '@utils/string';
 import { debounce } from 'lodash';
 import ToolVideoInput from '@components/input/ToolVideoInput';
 import { rotateVideo } from './service';
+import { RotationAngle } from '../../pdf/rotate-pdf/types';
+import SimpleRadio from '@components/options/SimpleRadio';
 
 export const initialValues = {
   rotation: 90
@@ -21,34 +21,28 @@ export const validationSchema = Yup.object({
     .required('Rotation is required')
 });
 
+const angleOptions: { value: RotationAngle; label: string }[] = [
+  { value: 90, label: '90° Clockwise' },
+  { value: 180, label: '180° (Upside down)' },
+  { value: 270, label: '270° (90° Counter-clockwise)' }
+];
 export default function RotateVideo({ title }: ToolComponentProps) {
   const [input, setInput] = useState<File | null>(null);
   const [result, setResult] = useState<File | null>(null);
   const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
 
   const compute = async (
     optionsValues: typeof initialValues,
     input: File | null
   ) => {
     if (!input) return;
-
-    try {
-      await validationSchema.validate(optionsValues);
-    } catch (validationError) {
-      setError((validationError as Yup.ValidationError).message);
-      return;
-    }
-
     setLoading(true);
-    setError(null);
 
     try {
       const rotatedFile = await rotateVideo(input, optionsValues.rotation);
       setResult(rotatedFile);
     } catch (error) {
       console.error('Error rotating video:', error);
-      setError('Failed to rotate video. Please try again.');
     } finally {
       setLoading(false);
     }
@@ -64,16 +58,16 @@ export default function RotateVideo({ title }: ToolComponentProps) {
       title: 'Rotation',
       component: (
         <Box>
-          <TextFieldWithDesc
-            onOwnChange={(value) =>
-              updateNumberField(value, 'rotation', updateField)
-            }
-            value={values.rotation}
-            label={'Rotation (degrees)'}
-            helperText={error || 'Valid values: 0, 90, 180, 270'}
-            error={!!error}
-            sx={{ mb: 2, backgroundColor: 'white' }}
-          />
+          {angleOptions.map((angleOption) => (
+            <SimpleRadio
+              key={angleOption.value}
+              title={angleOption.label}
+              checked={values.rotation === angleOption.value}
+              onClick={() => {
+                updateField('rotation', angleOption.value);
+              }}
+            />
+          ))}
         </Box>
       )
     }
@@ -83,14 +77,14 @@ export default function RotateVideo({ title }: ToolComponentProps) {
     <ToolContent
       title={title}
       input={input}
-      renderCustomInput={(_, setFieldValue) => (
+      inputComponent={
         <ToolVideoInput
           value={input}
           onChange={setInput}
           accept={['video/mp4', 'video/webm', 'video/ogg']}
           title={'Input Video'}
         />
-      )}
+      }
       resultComponent={
         loading ? (
           <ToolFileResult