Initial commit for new tool video to gif

src/pages/tools/video/video-to-gif/index.tsx

@@ -0,0 +1,69 @@
+import { Box } from '@mui/material';
+import React, { useState } from 'react';
+import ToolContent from '@components/ToolContent';
+import { ToolComponentProps } from '@tools/defineTool';
+import ToolTextInput from '@components/input/ToolTextInput';
+import ToolTextResult from '@components/result/ToolTextResult';
+import { GetGroupsType } from '@components/options/ToolOptions';
+import { CardExampleType } from '@components/examples/ToolExamples';
+import { main } from './service';
+import { InitialValuesType } from './types';
+import ToolVideoInput from '@components/input/ToolVideoInput';
+import ToolFileResult from '@components/result/ToolFileResult';
+
+const initialValues: InitialValuesType = {
+  // splitSeparator: '\n'
+};
+
+export default function VideoToGif({
+  title,
+  longDescription
+}: ToolComponentProps) {
+  const [input, setInput] = useState<File | null>(null);
+  const [result, setResult] = useState<File | null>(null);
+  const [loading, setIsLoading] = useState(false);
+
+  const compute = (values: InitialValuesType, input: File | null) => {
+    setResult(main(input, values));
+  };
+
+  const getGroups: GetGroupsType<InitialValuesType> | null = ({
+    values,
+    updateField
+  }) => [
+    {
+      title: 'Example Settings',
+      component: <Box></Box>
+    }
+  ];
+
+  return (
+    <ToolContent
+      title={title}
+      input={input}
+      inputComponent={
+        <ToolVideoInput value={input} onChange={setInput} title="Input Video" />
+      }
+      resultComponent={
+        loading ? (
+          <ToolFileResult
+            title="Converting to Gif"
+            value={null}
+            loading={true}
+          />
+        ) : (
+          <ToolFileResult
+            title="Converted to Gif"
+            value={result}
+            extension="gif"
+          />
+        )
+      }
+      initialValues={initialValues}
+      getGroups={getGroups}
+      setInput={setInput}
+      compute={compute}
+      toolInfo={{ title: `What is a ${title}?`, description: longDescription }}
+    />
+  );
+}