diff --git a/.eslintrc b/.eslintrc
index 6a44f8c..6c7bbbd 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -26,7 +26,12 @@
"ecmaVersion": 11,
"sourceType": "module"
},
- "plugins": ["react", "react-hooks", "@typescript-eslint", "tailwindcss"],
+ "plugins": [
+ "react",
+ "react-hooks",
+ "@typescript-eslint",
+ "tailwindcss"
+ ],
"rules": {
"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "warn",
@@ -36,6 +41,7 @@
"@typescript-eslint/no-non-null-assertion": "off",
"tailwindcss/classnames-order": "warn",
"tailwindcss/no-custom-classname": "warn",
- "tailwindcss/no-contradicting-classname": "error"
+ "tailwindcss/no-contradicting-classname": "error",
+ "@typescript-eslint/ban-types": "off"
}
}
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 5d23cdc..b74f8e3 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,43 +4,13 @@
-
-
-
-
-
-
-
-
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
@@ -69,32 +39,32 @@
- {
+ "keyToString": {
+ "ASKED_ADD_EXTERNAL_FILES": "true",
+ "ASKED_SHARE_PROJECT_CONFIGURATION_FILES": "true",
+ "RunOnceActivity.OpenProjectViewOnStart": "true",
+ "RunOnceActivity.ShowReadmeOnStart": "true",
+ "git-widget-placeholder": "main",
+ "ignore.virus.scanning.warn.message": "true",
+ "kotlin-language-version-configured": "true",
+ "last_opened_file_path": "C:/Users/HP/IdeaProjects/omni-tools/src/pages/string/split",
+ "node.js.detected.package.eslint": "true",
+ "node.js.detected.package.tslint": "true",
+ "node.js.selected.package.eslint": "(autodetect)",
+ "node.js.selected.package.tslint": "(autodetect)",
+ "nodejs_package_manager_path": "npm",
+ "npm.dev.executor": "Run",
+ "npm.prebuild.executor": "Run",
+ "prettierjs.PrettierConfiguration.Package": "C:\\Users\\HP\\IdeaProjects\\omni-tools\\node_modules\\prettier",
+ "project.structure.last.edited": "Problems",
+ "project.structure.proportion": "0.0",
+ "project.structure.side.proportion": "0.2",
+ "settings.editor.selected.configurable": "settings.typescriptcompiler",
+ "ts.external.directory.path": "C:\\Users\\HP\\IdeaProjects\\omni-tools\\node_modules\\typescript\\lib",
+ "vue.rearranger.settings.migration": "true"
}
-}]]>
+}
@@ -379,7 +358,8 @@
-
+
+
diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx
index 0c16d10..2e63fb7 100644
--- a/src/pages/home/index.tsx
+++ b/src/pages/home/index.tsx
@@ -1,8 +1,11 @@
-import { Box, Stack, TextField } from '@mui/material';
+import { Autocomplete, Box, Stack, TextField } from '@mui/material';
import Grid from '@mui/material/Grid';
import Typography from '@mui/material/Typography';
import SearchIcon from '@mui/icons-material/Search';
import { useNavigate } from 'react-router-dom';
+import { filterTools, tools } from '../../tools';
+import { useState } from 'react';
+import { DefinedTool } from '../../tools/defineTool';
const exampleTools: { label: string; url: string }[] = [
{
@@ -20,7 +23,15 @@ const exampleTools: { label: string; url: string }[] = [
];
export default function Home() {
const navigate = useNavigate();
-
+ const [inputValue, setInputValue] = useState('');
+ const [filteredTools, setFilteredTools] = useState(tools);
+ const handleInputChange = (
+ event: React.ChangeEvent<{}>,
+ newInputValue: string
+ ) => {
+ setInputValue(newInputValue);
+ setFilteredTools(filterTools(tools, newInputValue));
+ };
return (
- {' '}
Transform Your Workflow with
Omni Tools
@@ -45,13 +55,36 @@ export default function Home() {
your browser.
-
- }}
+ option.name}
+ renderInput={(params) => (
+
+ }}
+ onChange={(event) => handleInputChange(event, event.target.value)}
+ />
+ )}
+ renderOption={(props, option) => (
+ navigate(option.path)}
+ >
+
+ {option.name}
+ {option.description}
+
+
+ )}
/>
{exampleTools.map((tool) => (
diff --git a/src/pages/images/png/change-colors-in-png/meta.ts b/src/pages/images/png/change-colors-in-png/meta.ts
index 8e9e2ea..bb83fd8 100644
--- a/src/pages/images/png/change-colors-in-png/meta.ts
+++ b/src/pages/images/png/change-colors-in-png/meta.ts
@@ -3,9 +3,9 @@ import { lazy } from 'react';
export const tool = defineTool('png', {
path: 'change-colors',
- name: 'Change colors in PNG',
+ name: 'PNG color replacer',
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: ['png', 'split'],
+ "World's simplest online Portable Network Graphics (PNG) color changer. Just import your PNG image in the editor on the left, select which colors to change, and you'll instantly get a new PNG with the new colors on the right. Free, quick, and very powerful. Import a PNG – replace its colors",
+ keywords: ['png', 'color'],
component: lazy(() => import('./index'))
});
diff --git a/src/tools/defineTool.tsx b/src/tools/defineTool.tsx
index 6930a42..5eea31c 100644
--- a/src/tools/defineTool.tsx
+++ b/src/tools/defineTool.tsx
@@ -9,7 +9,7 @@ interface ToolOptions {
description: string;
}
-interface DefinedTool {
+export interface DefinedTool {
path: string;
name: string;
description: string;
diff --git a/src/tools/index.ts b/src/tools/index.ts
index a3fe811..1116ef3 100644
--- a/src/tools/index.ts
+++ b/src/tools/index.ts
@@ -1,4 +1,23 @@
import { stringTools } from '../pages/string/stringTools';
import { imageTools } from '../pages/images/imageTools';
+import { DefinedTool } from './defineTool';
-export const tools = [...stringTools, ...imageTools];
+export const tools: DefinedTool[] = [...stringTools, ...imageTools];
+
+export const filterTools = (
+ tools: DefinedTool[],
+ query: string
+): DefinedTool[] => {
+ if (!query) return tools;
+
+ const lowerCaseQuery = query.toLowerCase();
+
+ return tools.filter(
+ (tool) =>
+ tool.name.toLowerCase().includes(lowerCaseQuery) ||
+ tool.description.toLowerCase().includes(lowerCaseQuery) ||
+ tool.keywords.some((keyword) =>
+ keyword.toLowerCase().includes(lowerCaseQuery)
+ )
+ );
+};