chore: handle enter press on search

src/components/Hero.tsx

@@ -2,7 +2,7 @@ import { Autocomplete, Box, Stack, TextField } from '@mui/material';
 import Typography from '@mui/material/Typography';
 import SearchIcon from '@mui/icons-material/Search';
 import Grid from '@mui/material/Grid';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { DefinedTool } from '@tools/defineTool';
 import { filterTools, tools } from '@tools/index';
 import { useNavigate } from 'react-router-dom';
@@ -27,6 +27,7 @@ export default function Hero() {
   const [filteredTools, setFilteredTools] = useState<DefinedTool[]>(
     _.shuffle(tools)
   );
+  const [pendingNavigation, setPendingNavigation] = useState<boolean>(false);
   const navigate = useNavigate();
   const handleInputChange = (
     event: React.ChangeEvent<{}>,
@@ -35,6 +36,14 @@ export default function Hero() {
     setInputValue(newInputValue);
     setFilteredTools(_.shuffle(filterTools(tools, newInputValue)));
   };
+
+  useEffect(() => {
+    if (pendingNavigation && filteredTools.length > 0) {
+      navigate('/' + filteredTools[0].path);
+      setPendingNavigation(false);
+    }
+  }, [pendingNavigation, filteredTools, navigate]);
+
   return (
     <Box width={{ xs: '90%', md: '80%', lg: '60%' }}>
       <Stack mb={1} direction={'row'} spacing={1} justifyContent={'center'}>
@@ -94,6 +103,11 @@ export default function Hero() {
             </Box>
           </Box>
         )}
+        onKeyDown={(event) => {
+          if (event.key === 'Enter') {
+            setPendingNavigation(true);
+          }
+        }}
       />
       <Grid container spacing={2} mt={2}>
         {exampleTools.map((tool) => (