@kadconsulting/dry
Version:
KAD Reusable Component Library
26 lines • 1.72 kB
JavaScript
import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
import { useMemo, useState } from 'react';
import Icon from '../Icon/Icon';
import { ALL_ICONS, ALL_ICONS_MAPPING } from '../paths';
import { IconSizes } from '../Icon/IconTypes';
import { TextXs } from '../../Typography';
import { TextInput } from '../../TextInput';
const IconSearch = () => {
const [searchTerm, setSearchTerm] = useState('');
const matchedPaths = useMemo(() => Object.keys(ALL_ICONS).filter((key) => new RegExp(searchTerm, 'gi').test(key)), [searchTerm]);
const DisplayedIcons = useMemo(() => {
if (matchedPaths.length === 0)
return _jsxs("div", { children: ["No icons found for \"", searchTerm, "\""] });
return matchedPaths.map((key) => (_jsx("div", { className: 'icon__main-wrapper', children: _jsxs("div", { className: 'icon__svg-name-wrapper', children: [_jsx(Icon, { size: IconSizes.SMALL, Path: ALL_ICONS[key] }), _jsx(TextXs, { style: { marginTop: '8px' }, children: ALL_ICONS_MAPPING[key] })] }) }, key)));
}, [matchedPaths, searchTerm]);
return (_jsxs(_Fragment, { children: [_jsx(TextInput, { inputType: 'text', value: searchTerm, placeholder: 'Search for an icon...', onChange: (e) => setSearchTerm(e.target.value), style: {
width: '100%',
height: '40px',
padding: '4px 8px',
borderRadius: '8px',
marginBottom: '16px',
border: '1px solid var(--gray-300, #D0D5DD)',
} }), _jsx("div", { className: 'all-icons__wrapper', children: DisplayedIcons })] }));
};
export default IconSearch;
//# sourceMappingURL=IconSearch.js.map