+
+
- navigate('/')} fontSize={20}
- sx={{flexGrow: 1, cursor: 'pointer'}} color={'primary'}>OmniTools
+ navigate('/')}
+ fontSize={20}
+ sx={{ flexGrow: 1, cursor: 'pointer' }}
+ color={'primary'}
+ >
+ OmniTools
+
{
target="_blank"
rel="noopener noreferrer"
>
- 
+
Star us
diff --git a/src/components/ToolHeader.tsx b/src/components/ToolHeader.tsx
index 09cbf94..71edc9e 100644
--- a/src/components/ToolHeader.tsx
+++ b/src/components/ToolHeader.tsx
@@ -1,18 +1,22 @@
-import {Box, Stack} from "@mui/material";
-import Typography from "@mui/material/Typography";
-import textImage from '../assets/text.png'
+import { Box, Stack } from '@mui/material';
+import Typography from '@mui/material/Typography';
+import textImage from '../assets/text.png';
interface ToolHeaderProps {
title: string;
description: string;
}
-export default function ToolHeader({title, description}: ToolHeaderProps) {
- return (
-
- {title}
- {description}
-
- 
- )
+export default function ToolHeader({ title, description }: ToolHeaderProps) {
+ return (
+
+
+
+ {title}
+
+ {description}
+
+ 
+
+ );
}
diff --git a/src/components/input/ToolTextInput.tsx b/src/components/input/ToolTextInput.tsx
index 7920e61..171c49c 100644
--- a/src/components/input/ToolTextInput.tsx
+++ b/src/components/input/ToolTextInput.tsx
@@ -1,14 +1,18 @@
-import { Box, Stack, TextField } from '@mui/material'
-import Typography from '@mui/material/Typography'
-import Button from '@mui/material/Button'
-import PublishIcon from '@mui/icons-material/Publish'
-import ContentPasteIcon from '@mui/icons-material/ContentPaste'
-import React from 'react'
+import { Box, Stack, TextField } from '@mui/material';
+import Typography from '@mui/material/Typography';
+import Button from '@mui/material/Button';
+import PublishIcon from '@mui/icons-material/Publish';
+import ContentPasteIcon from '@mui/icons-material/ContentPaste';
+import React from 'react';
-export default function ToolTextInput({ value, onChange, title = 'Input text' }: {
+export default function ToolTextInput({
+ value,
+ onChange,
+ title = 'Input text'
+}: {
title?: string;
- value: string
- onChange: (value: string) => void
+ value: string;
+ onChange: (value: string) => void;
}) {
return (
@@ -27,5 +31,5 @@ export default function ToolTextInput({ value, onChange, title = 'Input text' }:
}>Copy to clipboard
- )
+ );
}
diff --git a/src/config/routesConfig.tsx b/src/config/routesConfig.tsx
index f62024a..54f2445 100644
--- a/src/config/routesConfig.tsx
+++ b/src/config/routesConfig.tsx
@@ -1,29 +1,18 @@
-import {RouteObject} from "react-router-dom";
-import {Navigate} from "react-router-dom";
-import {ImagesConfig} from "../pages/images/ImagesConfig";
-import {lazy} from "react";
-import {StringConfig} from "../pages/string/StringConfig";
+import { RouteObject } from 'react-router-dom';
+import { Navigate } from 'react-router-dom';
+import { lazy } from 'react';
-const Home = lazy(() => import("../pages/home"));
+const Home = lazy(() => import('../pages/home'));
const routes: RouteObject[] = [
{
- path: "/",
- element: void>(
callback: T,
- delay: number,
+ delay: number
): T {
const callbackRef = useRef(callback);
@@ -22,7 +22,7 @@ function useDebounce void>(
_.debounce((...args: never[]) => {
callbackRef.current(...args);
}, delay),
- [delay],
+ [delay]
);
useEffect(() => {
diff --git a/src/hooks/usePrevious.ts b/src/hooks/usePrevious.ts
index 1fec16f..d1d8e95 100644
--- a/src/hooks/usePrevious.ts
+++ b/src/hooks/usePrevious.ts
@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useRef } from 'react';
/**
* The usePrevious function is a custom hook that returns the previous value of a variable.
diff --git a/src/hooks/useTimeout.ts b/src/hooks/useTimeout.ts
index bb2ffd2..cd6ad8e 100644
--- a/src/hooks/useTimeout.ts
+++ b/src/hooks/useTimeout.ts
@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useRef } from 'react';
/**
* The useTimeout function is a custom hook that sets a timeout for a given callback function.
@@ -15,7 +15,7 @@ function useTimeout(callback: () => void, delay: number) {
useEffect(() => {
let timer: NodeJS.Timeout | undefined;
- if (delay !== null && callback && typeof callback === "function") {
+ if (delay !== null && callback && typeof callback === 'function') {
timer = setTimeout(callbackRef.current, delay);
}
diff --git a/src/hooks/useUpdateEffect.ts b/src/hooks/useUpdateEffect.ts
index d172f8a..e97827d 100644
--- a/src/hooks/useUpdateEffect.ts
+++ b/src/hooks/useUpdateEffect.ts
@@ -1,4 +1,4 @@
-import { DependencyList, EffectCallback, useEffect, useRef } from "react";
+import { DependencyList, EffectCallback, useEffect, useRef } from 'react';
/**
* The useUpdateEffect function is a custom hook that behaves like useEffect, but only runs on updates and not on initial mount.
diff --git a/src/index.tsx b/src/index.tsx
index c52ebc4..5e897af 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,8 +1,8 @@
-import { createRoot } from 'react-dom/client'
-import 'tailwindcss/tailwind.css'
-import App from 'components/App'
+import { createRoot } from 'react-dom/client';
+import 'tailwindcss/tailwind.css';
+import App from 'components/App';
-const container = document.getElementById('root') as HTMLDivElement
-const root = createRoot(container)
+const container = document.getElementById('root') as HTMLDivElement;
+const root = createRoot(container);
-root.render(
-
- Transform Your Workflow
- with Omni
- Tools
-
- Boost your productivity with Omni Tools, the ultimate toolkit for getting things done quickly! Access thousands
- of
- user-friendly utilities for editing images, text, lists, and data, all directly from your browser.
-
+ return (
+
+
+
+ {' '}
+ Transform Your Workflow with
+
+ Omni Tools
+
+
+
+ Boost your productivity with Omni Tools, the ultimate toolkit for
+ getting things done quickly! Access thousands of user-friendly
+ utilities for editing images, text, lists, and data, all directly from
+ your browser.
+
-
- {exampleTools.map((tool) => (
- navigate(tool.url)}
- item
- xs={4}
- key={tool.label}
- display="flex"
- flexDirection="row"
- justifyContent="center"
- alignItems="center"
- padding={2}
- sx={{borderWidth: 1, borderRadius: 3, borderColor: 'grey', borderStyle: 'solid', cursor: 'pointer'}}
- >
- {tool.label}
-
- ))}
-
+
+ {exampleTools.map((tool) => (
+ navigate(tool.url)}
+ item
+ xs={4}
+ key={tool.label}
+ display="flex"
+ flexDirection="row"
+ justifyContent="center"
+ alignItems="center"
+ padding={2}
+ sx={{
+ borderWidth: 1,
+ borderRadius: 3,
+ borderColor: 'grey',
+ borderStyle: 'solid',
+ cursor: 'pointer'
+ }}
+ >
+ {tool.label}
+
+ ))}
+
+
- )
+ );
}
diff --git a/src/pages/images/ImagesConfig.tsx b/src/pages/images/ImagesConfig.tsx
deleted file mode 100644
index fa328ae..0000000
--- a/src/pages/images/ImagesConfig.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import {RouteObject} from "react-router-dom";
-import {lazy} from "react";
-import {PngConfig} from "./png/PngConfig";
-
-const PngHome = lazy(() => import("./index"));
-
-export const ImagesConfig: RouteObject[] = [
- {path: '', element:
+
+
);
}
diff --git a/src/pages/string/split/meta.ts b/src/pages/string/split/meta.ts
new file mode 100644
index 0000000..26e0110
--- /dev/null
+++ b/src/pages/string/split/meta.ts
@@ -0,0 +1,11 @@
+import { defineTool } from '../../../tools/defineTool';
+import { lazy } from 'react';
+
+export const tool = defineTool('string', {
+ path: 'split',
+ name: 'Text splitter',
+ description:
+ "World's simplest browser-based utility for splitting text. Load your text in the input form on the left and you'll automatically get pieces of this text on the right. Powerful, free, and fast. Load text – get chunks.",
+ keywords: ['text', 'split'],
+ component: lazy(() => import('./index'))
+});
diff --git a/src/pages/string/stringTools.ts b/src/pages/string/stringTools.ts
new file mode 100644
index 0000000..a89fc70
--- /dev/null
+++ b/src/pages/string/stringTools.ts
@@ -0,0 +1,3 @@
+import { tool as stringSplit } from './split/meta';
+
+export const stringTools = [stringSplit];
diff --git a/src/tools/defineTool.tsx b/src/tools/defineTool.tsx
new file mode 100644
index 0000000..6930a42
--- /dev/null
+++ b/src/tools/defineTool.tsx
@@ -0,0 +1,39 @@
+import ToolLayout from '../components/ToolLayout';
+import React, { LazyExoticComponent, JSXElementConstructor } from 'react';
+
+interface ToolOptions {
+ path: string;
+ component: LazyExoticComponent>>;
+ keywords: string[];
+ name: string;
+ description: string;
+}
+
+interface DefinedTool {
+ path: string;
+ name: string;
+ description: string;
+ keywords: string[];
+ component: () => JSX.Element;
+}
+
+export const defineTool = (
+ basePath: string,
+ options: ToolOptions
+): DefinedTool => {
+ const { path, name, description, keywords, component } = options;
+ const Component = component;
+ return {
+ path: `${basePath}/${path}`,
+ name,
+ description,
+ keywords,
+ component: () => {
+ return (
+
+
+ );
+ }
+ };
+};
diff --git a/src/tools/index.ts b/src/tools/index.ts
new file mode 100644
index 0000000..a3fe811
--- /dev/null
+++ b/src/tools/index.ts
@@ -0,0 +1,4 @@
+import { stringTools } from '../pages/string/stringTools';
+import { imageTools } from '../pages/images/imageTools';
+
+export const tools = [...stringTools, ...imageTools];
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 90d2105..2cebd20 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,3 +1,3 @@
export function classNames(...classes: unknown[]): string {
- return classes.filter(Boolean).join(' ')
+ return classes.filter(Boolean).join(' ');
}
diff --git a/tailwind.config.mjs b/tailwind.config.mjs
index 2aa3f96..e59b9be 100644
--- a/tailwind.config.mjs
+++ b/tailwind.config.mjs
@@ -6,4 +6,4 @@ export default {
extend: {}
},
plugins: []
-}
+};