Server IP : 172.67.158.161 / Your IP : 3.137.187.88 Web Server : LiteSpeed System : Linux business53.web-hosting.com 4.18.0-553.lve.el8.x86_64 #1 SMP Mon May 27 15:27:34 UTC 2024 x86_64 User : giankuin ( 1871) PHP Version : 7.4.33 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : OFF | Pkexec : OFF Directory : /proc/self/root/proc/thread-self/root/home/giankuin/sieuthiweb.com.vn/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/icons/stories/ |
Upload File : |
/** * External dependencies */ import { omitBy, omit, map } from 'lodash'; import { useState } from '@wordpress/element'; /** * Internal dependencies */ import Icon from '../icon'; import * as icons from '../index'; const availableIcons = omit( icons, 'Icon' ); export default { title: 'WooCommerce Blocks/@woocommerce/icons', component: Icon, }; const LibraryExample = () => { const [ filter, setFilter ] = useState( '' ); const filteredIcons = omitBy( availableIcons, ( _icon, name ) => { return ! name.includes( filter ); } ); return ( <div style={ { padding: '20px' } }> <label htmlFor="filter-icons" style={ { paddingRight: '30px' } }> Filter Icons </label> <input // eslint-disable-next-line no-restricted-syntax id="filter-icons" type="search" value={ filter } placeholder="Icon name" onChange={ ( event ) => setFilter( event.target.value ) } /> <div style={ { display: 'flex', alignItems: 'bottom', 'flex-wrap': 'wrap', } } > { map( filteredIcons, ( icon, name ) => { return ( <div key={ name } style={ { display: 'flex', 'flex-direction': 'column', width: '25%', padding: '25px 0 25px 0', } } > <strong style={ { width: '200px', } } > { name } </strong> <div style={ { display: 'flex', alignItems: 'center', } } > <Icon srcElement={ icon } /> <Icon style={ { 'padding-left': '10px' } } srcElement={ icon } size={ 36 } /> <Icon style={ { 'padding-left': '10px' } } srcElement={ icon } size={ 48 } /> </div> </div> ); } ) } </div> </div> ); }; export const Library = () => <LibraryExample />;