import { isUndefined , sample } from 'lodash' ; import { memo , useState } from 'react' ; import { FaRegLightbulb } from 'react-icons/fa' ; import { Link } from 'react-router-dom' ; import { SearchTipItem } from '../../types' ; import { SEARH_TIPS } from '../../utils/data' ; import { prepareQueryString } from '../../utils/prepareQueryString' ; import styles from './SearchTip.module.css' ; const SearchTip = ( ) => { const [ activeTip ] = useState < SearchTipItem | undefined > ( sample ( SEARH_TIPS ) ) ; if ( isUndefined ( activeTip ) ) return null ; return ( < div className = "d-none d-md-inline w-50 mx-auto text-center position-relative" > < div className = { `d-flex mt-2 pt-1 flex-row align-items-center justify-content-center textLight ${ styles . tipText }` } > < FaRegLightbulb className = "me-1" / > < div > < span className = "fw-semibold me-1" > Tip : < /span> { activeTip . content } Example : { ' ' } < Link className = "fw-bold textLighter p-0" to = { { pathname : '/packages/search' , search : prepareQueryString ( { pageNumber : 1 , tsQueryWeb : activeTip . example , } ) , } } > { activeTip . example } < /Link> < /div> < /div> < /div>); } ; export default memo ( SearchTip ) ;