Composable styles in Clearwater

master_detail_component.rb

class MasterDetailComponent
  include Clearwater::Component

  def initialize master, detail
    @master = master
    @detail = detail
  end

  def render
    div([
      div({ key: 'master', style: Style.master }, @master),
      div({ key: 'detail', style: Style.detail }, @detail),
    ])
  end

  module Style
    module_function

    def master
      side_by_side(width: '25%')
    end

    def detail
      side_by_side(width: '75%')
    end
    
    def side_by_side(attributes={})
      {
        display: 'inline-block',
        vertical_align: :top,
      }.merge(attributes)
    end
  end
end