2023-11-08 04:08:33 +08:00
|
|
|
|
import { useEffect, useRef } from 'react'
|
|
|
|
|
import { useDispatch } from 'react-redux'
|
2023-11-08 00:46:14 +08:00
|
|
|
|
import { setQuery } from './app/searchSlice'
|
|
|
|
|
import { setShowName } from './app/displaySlice'
|
|
|
|
|
import { IconList } from './IconList'
|
|
|
|
|
import './App.css'
|
|
|
|
|
|
|
|
|
|
function App() {
|
|
|
|
|
const inputSearch = useRef()
|
|
|
|
|
const checkShowName = useRef()
|
|
|
|
|
const dispatch = useDispatch()
|
|
|
|
|
|
|
|
|
|
function queryOnChange () {
|
|
|
|
|
dispatch(setQuery(inputSearch.current.value))
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function showNameOnChange () {
|
|
|
|
|
dispatch(setShowName(checkShowName.current.checked))
|
|
|
|
|
}
|
|
|
|
|
|
2023-11-08 04:08:33 +08:00
|
|
|
|
useEffect(() => {
|
|
|
|
|
inputSearch.current.focus()
|
|
|
|
|
})
|
|
|
|
|
|
2023-11-08 00:46:14 +08:00
|
|
|
|
return (
|
|
|
|
|
<>
|
2023-11-08 04:08:33 +08:00
|
|
|
|
<input type='text' id='search' ref={ inputSearch } onChange={ queryOnChange } placeholder="Search an icon — try ‘fruit’, ‘logo’, ‘ui’" />
|
2023-11-08 00:46:14 +08:00
|
|
|
|
<div id='display-options'>
|
|
|
|
|
<input type="checkbox" name="checkShowName" ref={ checkShowName } onChange={ showNameOnChange } id='checkShowName' />
|
|
|
|
|
<label htmlFor="checkShowName">Display icon names</label>
|
|
|
|
|
</div>
|
|
|
|
|
<IconList></IconList>
|
|
|
|
|
</>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export default App
|