import * as M from "@moai/core" ; import s from "./styles.module.css" ; import { MATERIALS } from "./table/robots" ; import { GoSearch } from "react-icons/go" ; import { Shot } from "./shot/shot" ; const materialOptions = MATERIALS . map ( ( material ) => { const option = M . Select . toStringOption ( material ) ; option . disabled = material . length % 2 === 1 ; return option ; } ) ; materialOptions . unshift ( { ... M . Select . toStringOption ( "Select" ) , disabled : true , } ) ; const modelOptions = ( ( ) => { const arr = [ "Posts" , "Users" , "Tags" , "All" ] ; return arr . map ( M . Select . toStringOption ) ; } ) ( ) ; type ColumnProps = Pick < M . SelectProps < unknown > , "style" > ; const base = { options : materialOptions , defaultValue : "Select" , } ; const Column = ( { style } ) : JSX . Element => ( < div className = { [ s . col , s . rows ] . join ( " " ) } > < M . Select { ... base } style = { style } / > < M . Select { ... base } style = { style } disabled /> < /div>); const Full = ( ) : JSX . Element => ( < M . Select options = { [ { id : "full" , label : "Full-width Select" , value : "full" , disabled : true , } , ... materialOptions , ] } defaultValue = "full" fill / > ) ; const Group = ( ) : JSX . Element => { const select = < M . Select options = { modelOptions } defaultValue = "Posts" / > ; const input = < M . Input defaultValue = "" placeholder = "Type to search" / > ; const button = < M . Button iconLabel = "Search" icon = { GoSearch } / > ; const children = [ { fill : false , element : select } , { fill : true , element : input } , { fill : false , element : button } , ] ; return < M . ButtonGroup fill children = { children } / > ; } ; export const GallerySelect = ( ) : JSX . Element => ( < Shot > < div className = { s . rows } > < div className = { s . cols } > < Column style = { M . Select . styles . outset } /> < Column style = { M . Select . styles . flat } / > < /div> < Group / > < Full /> < /div> < /Shot>);