56 lines
1.7 KiB
JavaScript
56 lines
1.7 KiB
JavaScript
import { useSelector, useDispatch } from 'react-redux'
|
|
import iconData from '../public/icons.json'
|
|
import { useEffect, useRef, useState } from 'react';
|
|
|
|
export const IconList = function () {
|
|
const [icons, setIcons] = useState(Object.keys(iconData))
|
|
const query = useSelector(state => state.search.query)
|
|
const showName = useSelector(state => state.display.showName)
|
|
|
|
useEffect(() => {
|
|
if (query == '') {
|
|
setIcons(Object.keys(iconData))
|
|
return
|
|
}
|
|
|
|
const keywords = query.toLowerCase().split(' ').filter(word => (word))
|
|
let filtered = [];
|
|
for (const filename in iconData) {
|
|
const matched = keywords.filter(keyword => {
|
|
for (const tag of iconData[filename]) {
|
|
if (tag.indexOf(keyword.toLowerCase()) != -1) return true
|
|
}
|
|
})
|
|
|
|
if (matched.length == keywords.length) filtered.push(filename)
|
|
}
|
|
// console.log(filtered)
|
|
|
|
setIcons(filtered)
|
|
}, [query])
|
|
|
|
function launchDownload (filename) {
|
|
location.href = `https://sqkhor.com/pixel-icons/${filename.replace('.svg', '')}`
|
|
// window.open(`download.php?icon=${filename}`)
|
|
}
|
|
|
|
if (icons.length == 0) {
|
|
return (
|
|
<div className="no-result">
|
|
No icon found for<br />"{query.trim().length > 24 ? query.trim().substring(0,24) + '...' : query.trim()}"
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<ul className={ `icon-list ${ showName ? 'show-name' : ''}` }>
|
|
{ icons.map( (filename, index) => (
|
|
<li key={ index }>
|
|
<a href={`https://sqkhor.com/pixel-icons/${filename.replace('.svg', '')}`}><img className='icon' src={ `./icons/${filename}` } /></a>
|
|
<div className='name'>{ showName ? <a href={`https://sqkhor.com/pixel-icons/${filename.replace('.svg', '')}`}>{filename.replace('.svg', '')}</a> : '' }</div>
|
|
</li>
|
|
) ) }
|
|
</ul>
|
|
)
|
|
};
|