balmet.com

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs

SidebarMain.js (2588B)

      1 import { useTemplatesStore } from '../../../state/Templates'
      2 // import { SelectControl } from '@wordpress/components'
      3 import { __ } from '@wordpress/i18n'
      4 import { debounce } from 'lodash'
      5 import { useState } from '@wordpress/element'
      6 import { Panel } from '@wordpress/components'
      7 import TaxonomySection from '../../../components/TaxonomySection'
      8 import { useTaxonomyStore } from '../../../state/Taxonomies'
      9 
     10 export default function SidebarMain() {
     11     const updateSearchParams = useTemplatesStore(state => state.updateSearchParams)
     12     const taxonomies = useTaxonomyStore(state => state.taxonomies)
     13     const searchParams = useTemplatesStore(state => state.searchParams)
     14     const searchInputUpdate = debounce((value) => updateSearchParams({
     15         taxonomies: {},
     16         search: value,
     17     }), 500)
     18     const [searchValue, setSearchValue] = useState(searchParams?.search ?? '')
     19 
     20     return <>
     21         <div className="mt-px bg-white mb-6 mx-6 pt-6 lg:mx-0 lg:pt-0">
     22             <label
     23                 className="sr-only"
     24                 htmlFor="extendify-search-input">{__('What are you looking for?', 'extendify-sdk')}</label>
     25             <input
     26                 id="extendify-search-input"
     27                 type="search"
     28                 placeholder={__('What are you looking for?', 'extendify-sdk')}
     29                 onChange={(event) => {
     30                     useTemplatesStore.setState({
     31                         nextPage: '',
     32                     })
     33                     setSearchValue(event.target.value)
     34                     searchInputUpdate(event.target.value)
     35                 }}
     36                 value={searchValue}
     37                 className="button-focus bg-gray-100 focus:bg-white border-0 m-0 p-3.5 pb-3 rounded-none text-sm w-full"
     38                 autoComplete="off" />
     39             <svg className="absolute top-3 right-6 hidden lg:block pointer-events-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" role="img" aria-hidden="true" focusable="false"><path d="M13.5 6C10.5 6 8 8.5 8 11.5c0 1.1.3 2.1.9 3l-3.4 3 1 1.1 3.4-2.9c1 .9 2.2 1.4 3.6 1.4 3 0 5.5-2.5 5.5-5.5C19 8.5 16.5 6 13.5 6zm0 9.5c-2.2 0-4-1.8-4-4s1.8-4 4-4 4 1.8 4 4-1.8 4-4 4z"></path></svg>
     40         </div>
     41         <div className="mt-px flex-grow hidden overflow-y-auto pb-32 pr-2 pt-px sm:block">
     42             <Panel>
     43                 {Object.entries(taxonomies).map((taxonomy) => {
     44                     return <TaxonomySection
     45                         key={taxonomy[0]}
     46                         taxonomy={taxonomy} />
     47                 })}
     48             </Panel>
     49         </div>
     50     </>
     51 }