scalable_css_ITCSS_components.mol.jsx

import { StyleSheet, css } from 'aphrodite'
import { colors, spacing } from 'App/style/settings'
import Btn from 'App/shared/atm.Btn'
import Input from 'App/shared/atm.Input'

const styles = StyleSheet.create({
  container: {
    display: 'flex',
    align: 'center',
    padding: spacing.default
  },
  label: {
    color: colors.secondary
  },
  space: {
    marginRight: spacing.tiny
  }
})

const SearchUI = ({inputVal, onInputUpdate, onSearch}) =>
  <div className={css(styles.container)}>
    <div className={css(style.space)}>
      <label className={css(style.label)}>Search</label>
      <Input value={inputVal} onChange={onInputUpdate} />
    </div>
    <Btn onClick={onSearch}>Search</Btn>
  <div>