feat: search tools

.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"
   }
 }

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<string>('');
+  const [filteredTools, setFilteredTools] = useState<DefinedTool[]>(tools);
+  const handleInputChange = (
+    event: React.ChangeEvent<{}>,
+    newInputValue: string
+  ) => {
+    setInputValue(newInputValue);
+    setFilteredTools(filterTools(tools, newInputValue));
+  };
   return (
     <Box
       padding={5}
@@ -32,7 +43,6 @@ export default function Home() {
     >
       <Box width={'60%'}>
         <Stack mb={1} direction={'row'} spacing={1}>
-          {' '}
           <Typography fontSize={30}>Transform Your Workflow with </Typography>
           <Typography fontSize={30} color={'primary'}>
             Omni Tools
@@ -45,13 +55,36 @@ export default function Home() {
           your browser.
         </Typography>
 
-        <TextField
-          fullWidth
-          placeholder={'Search all tools'}
-          sx={{ borderRadius: 2 }}
-          InputProps={{
-            endAdornment: <SearchIcon />
-          }}
+        <Autocomplete
+          sx={{ mb: 2 }}
+          autoHighlight
+          options={filteredTools}
+          getOptionLabel={(option) => option.name}
+          renderInput={(params) => (
+            <TextField
+              {...params}
+              fullWidth
+              placeholder={'Search all tools'}
+              sx={{ borderRadius: 2 }}
+              InputProps={{
+                ...params.InputProps,
+                endAdornment: <SearchIcon />
+              }}
+              onChange={(event) => handleInputChange(event, event.target.value)}
+            />
+          )}
+          renderOption={(props, option) => (
+            <Box
+              component="li"
+              {...props}
+              onClick={() => navigate(option.path)}
+            >
+              <Box>
+                <Typography fontWeight={'bold'}>{option.name}</Typography>
+                <Typography fontSize={12}>{option.description}</Typography>
+              </Box>
+            </Box>
+          )}
         />
         <Grid container spacing={1} mt={2}>
           {exampleTools.map((tool) => (

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'))
 });

src/tools/defineTool.tsx

@@ -9,7 +9,7 @@ interface ToolOptions {
   description: string;
 }
 
-interface DefinedTool {
+export interface DefinedTool {
   path: string;
   name: string;
   description: string;

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)
+      )
+  );
+};