diff --git a/src/components/IconGallery.js b/src/components/IconGallery.js index 09657ab6a..fa234cc49 100644 --- a/src/components/IconGallery.js +++ b/src/components/IconGallery.js @@ -1,4 +1,4 @@ -import React, { useMemo } from 'react'; +import React, { useMemo, useState } from 'react'; import styles from './IconGallery.module.scss'; const IconGallery = () => { @@ -8,27 +8,42 @@ const IconGallery = () => { const Icon = useMemo(() => window.__NR1_SDK__.default.Icon, [ window?.__NR1_SDK__, ]); - - // If we don't have the component, don't render anything if (!Icon) return null; - console.log('render icon gallery'); + // Basic search / filtering + const [search, updateSearch] = useState(''); + const types = Object.keys(Icon.TYPE); + const filteredTypes = search + ? types.filter((type) => type.toLowerCase().includes(search.toLowerCase())) + : types; + + console.log('render IconGallery'); return ( <>

Icon Gallery

- + updateSearch(e.target.value)} + />
-
- {Object.keys(Icon.TYPE).map((type, index) => ( -
- - {type} -
- ))} -
+ {filteredTypes.length ? ( +
+ {filteredTypes.map((type, index) => ( +
+ + {type} +
+ ))} +
+ ) : ( +
No results for "{search}"
+ )} ); }; diff --git a/src/components/IconGallery.module.scss b/src/components/IconGallery.module.scss index 4382cb744..c255ac0cf 100644 --- a/src/components/IconGallery.module.scss +++ b/src/components/IconGallery.module.scss @@ -1,10 +1,9 @@ .iconFilter { padding: 1rem; + padding-left: 0; input { width: 60%; - margin: auto; - display: block; padding: 0.5rem; } }