jsx import { css , jsx } from '@emotion/core' ; import { Fragment , useCallback } from 'react' ; import TextButton from './TextButton' ; import { env } from './environment' ; type OrgInputProps = { orgName : string ; onChange : ( orgName : string ) => void ; } ; export default function OrgInput ( { orgName , onChange } ) { const onInputChange = useCallback ( ( event ) => { onChange ( event . target . value ) ; } , [ ] ) ; return ( < Fragment > < label > < div css = { css `
            padding-left: 4px;
            padding-bottom: 8px;
            font-size: 20px;
          ` } > Enter an organization ’ s location : < /div> < input onChange = { onInputChange } placeholder = "e.g. xyz.aragonid.eth" type = "text" value = { orgName } css = { css `
            width: 100%;
            padding: 12px;
            border: 2px solid #fad4fa;
            border-radius: 6px;
            font-size: 24px;
            outline: 0;
          ` } /> < /label> < div css = { css `
          white-space: nowrap;
          padding-top: 8px;
          padding-left: 4px;
          font-size: 20px;
        ` } > Or pick one : & nbsp ; { env . addresses . map ( ( name , index ) => ( < span key = { name } > { index > 0 && < span > , < /span>} < TextButton onClick = { ( ) => onChange ( name ) } > { name . match ( /^[^\.]+/ ) ?. [ 0 ] } < /TextButton> < /span>))} . < /div> < /Fragment>); }