src/pages/mods.tsx

@@ -6,14 +6,16 @@ import React, {
   useCallback,
   useEffect,
   useMemo,
+  useRef,
   useState
 } from 'react'
+import { createSearchParams, useNavigate } from 'react-router-dom'
 import { LoadingSpinner } from '../components/LoadingSpinner'
 import { ModCard } from '../components/ModCard'
 import { MOD_FILTER_LIMIT } from '../constants'
 import { MetadataController } from '../controllers'
 import { useAppSelector, useDidMount, useMuteLists } from '../hooks'
-import { getModPageRoute } from '../routes'
+import { appRoutes, getModPageRoute } from '../routes'
 import '../styles/filters.css'
 import '../styles/pagination.css'
 import '../styles/search.css'
@@ -227,6 +229,27 @@ export const ModsPage = () => {
 }
 
 const PageTitleRow = React.memo(() => {
+  const navigate = useNavigate()
+  const searchTermRef = useRef<HTMLInputElement>(null)
+
+  const handleSearch = () => {
+    const value = searchTermRef.current?.value || '' // Access the input value from the ref
+    if (value !== '') {
+      const searchParams = createSearchParams({
+        searchTerm: value,
+        searching: 'Mods'
+      })
+      navigate({ pathname: appRoutes.search, search: `?${searchParams}` })
+    }
+  }
+
+  // Handle "Enter" key press inside the input
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Enter') {
+      handleSearch()
+    }
+  }
+
   return (
     <div className='IBMSecMain'>
       <div className='SearchMainWrapper'>
@@ -236,8 +259,19 @@ const PageTitleRow = React.memo(() => {
         <div className='SearchMain'>
           <div className='SearchMainInside'>
             <div className='SearchMainInsideWrapper'>
-              <input type='text' className='SMIWInput' />
-              <button className='btn btnMain SMIWButton' type='button'>
+              <input
+                type='text'
+                className='SMIWInput'
+                ref={searchTermRef}
+                onKeyDown={handleKeyDown}
+                placeholder='Enter search term'
+              />
+
+              <button
+                className='btn btnMain SMIWButton'
+                type='button'
+                onClick={handleSearch}
+              >
                 <svg
                   xmlns='http://www.w3.org/2000/svg'
                   viewBox='0 0 512 512'