import { Box , H1 , Panel , Search , Table } from '@bigcommerce/big-design' ; import React , { useState } from 'react' ; import { CodePreview , PageNavigation } from '../components' ; import { SearchPropTable } from '../PropTables' ; const data = [ { sku : 'ABS' , name : '[Sample] Able Brewing System' , stock : 225 } , { sku : 'CC3C' , name : '[Sample] Chemex Coffeemaker 3 cup' , stock : 49 } , { sku : 'CGLD' , name : '[Sample] Laundry Detergent' , stock : 29 } , { sku : 'CLC' , name : '[Sample] Canvas Laundry Cart' , stock : 2 } , { sku : 'DPB' , name : '[Sample] Dustpan & Brush' , stock : 34 } , { sku : 'OCG' , name : '[Sample] Oak Cheese Grater' , stock : 34 } , { sku : 'OFSUC' , name : '[Sample] Utility Caddy' , stock : 45 } , ] ; const SearchPage = ( ) => { const items = [ { id : 'examples' , title : 'Examples' , render : ( ) => ( < > < Panel > < CodePreview scope = { { data } } > { } { function Example ( ) { const [ items , setItems ] = useState ( data ) ; const [ searchValue , setSearchValue ] = useState ( '' ) ; const onChange = ( event ) => setSearchValue ( event . target . value ) ; const onSubmit = ( ) => { setItems ( ( prevItems ) => { if ( searchValue ) { return prevItems . filter ( ( item ) => item . name . includes ( searchValue ) ) ; } return data ; } ) ; } ; return ( < > < Box marginBottom = "medium" > < Search value = { searchValue } onChange = { onChange } onSubmit = { onSubmit } / > < /Box> < Table columns = { [ { header : 'Sku' , hash : 'sku' , render : ( { sku } ) => sku } , { header : 'Name' , hash : 'name' , render : ( { name } ) => name } , { header : 'Stock' , hash : 'stock' , render : ( { stock } ) => stock } , ] } items = { items } / > < />); } } { } < /CodePreview> < /Panel> < />), } , { id : 'props' , title : 'Props' , render : ( ) => < SearchPropTable />, } , ] ; return ( < > < H1 > Search < /H1> < PageNavigation items = { items } / > < />); } ; export default SearchPage ;