pass search props

src/pages/LogsPage/LogsPage.tsx

@@ -10,9 +10,16 @@ import { useEffect, useState } from 'react'
 import HeaderBtns from './HeaderBtns'
 
 const LogsPage = () => {
+  const [highLightSearched, setHighLightSearched] = useState(false)
+  const [searchInput, setSearchInput] = useState('');
   const [timestamps, setTimestamps] = useState(false)
   const [windowWidth, setWindowWidth] = useState(window.innerWidth)
   const [dropdownMenuItem, setDropdownMenuItem] = useState('Validator')
+
+  const triggerSearch = (isTriggered: boolean) => {
+    setHighLightSearched(isTriggered)
+  }
+
   useEffect(() => {
     const handleResize = () => {
       setWindowWidth(+window.innerWidth)
@@ -46,6 +53,11 @@ const LogsPage = () => {
             setDropdownMenuItem={setDropdownMenuItem}
             setTimestamps={setTimestamps}
             timestamps={timestamps}
+            searchInput={searchInput}
+            setSearchInput={setSearchInput}
+            triggerSearch={triggerSearch}
+           
+
           />
         </XStack>
         <Stack style={{ width: '100%', alignItems: 'center' }}>
@@ -53,6 +65,9 @@ const LogsPage = () => {
             windowWidth={windowWidth}
             dropdownMenuItem={dropdownMenuItem}
             timestamps={timestamps}
+            searchInput={searchInput}
+            setSearchInput={setSearchInput}
+            highLightSearched={highLightSearched}
           />
           <Stack
             space="$4"

src/pages/LogsPage/LogsTerminal.tsx

@@ -16,6 +16,9 @@ type LogsTerminalProps = {
   windowWidth: number
   dropdownMenuItem: string
   timestamps: boolean
+  searchInput: string
+  setSearchInput: (searchInput: string) => void
+  highLightSearched: boolean
 }
 
 const fetchMoreData = () => {
@@ -30,15 +33,19 @@ const fetchMoreData = () => {
   })
 }
 
-const LogsTerminal = ({ windowWidth, timestamps }: LogsTerminalProps) => {
+const LogsTerminal = ({
+  windowWidth,
+  timestamps,
+  searchInput,
+  setSearchInput,
+  highLightSearched,
+}: LogsTerminalProps) => {
   const [data, setData] = useState<DataType[]>([])
   const [loadedIndexes, setLoadedIndexes] = useState<{ [key: number]: boolean }>({})
   const listRef = useRef<List | null>(null)
 
   const [shouldAutoScroll, setShouldAutoScroll] = useState(true)
 
-   
-
   useEffect(() => {
     if (shouldAutoScroll) {
       setTimeout(() => {
@@ -123,11 +130,22 @@ const LogsTerminal = ({ windowWidth, timestamps }: LogsTerminalProps) => {
               border: '1px solid #E7EAEE',
             }}
           >
-            {({ index, style }) => (
-              <Stack style={style}>
-                <TerminalRow data={data[index]} index={index} timestamps={timestamps} />
-              </Stack>
-            )}
+            {({ index, style }) => {
+              const highlight =
+                searchInput && data[index].description.split(' ').includes(searchInput)
+                // now we only check for the existing text at the moment 
+                // I have to move this statemant in the terminalRow component
+              return (
+                <Stack style={style}>
+                  <TerminalRow
+                    data={data[index]}
+                    index={index}
+                    timestamps={timestamps}
+                    highlight={highlight}
+                  />
+                </Stack>
+              )
+            }}
           </List>
         )}
       </InfiniteLoader>