Example of Clearwater components containing their own styles

app_header.rb

class AppHeader
  include Clearwater::Component
  
  def render
    header({ style: style }, [
      h1({ style: app_name_style }, 'My App')
      nav({ style: nav_style }, [
        NavLink.new('Home', '/'),
        NavLink.new('Foo',  '/foo'),
        NavLink.new('Bar',  '/bar'),
      ])
    ])
  end
  
  def style
    {
      # Every render, you get a different color!
      background_color: random_color,
      color: random_color,
      
      # You can have independent transitions, just pass in an array
      transition: [
        'background-color 500ms', # We do have to specify dashed style name here :-\
        'color 800ms',
      ],
    }
  end
  
  def app_name_style
    {
      font_family: 'Helvetica Neue',
      font_size: '2.5em',
    }
  end
  
  def random_color
    "##{(rand(16) ** 6).to_s(16)}"
  end
end

layout.rb

class Layout
  include Clearwater::Component
  
  def render
    div({ style: style }, [
      AppHeader.new,
      outlet,
      AppFooter.new,
    ])
  end
  
  def style
    {
      # Note snake-cased attribute names. You can also camelCase them if you like.
      background_color: '#eee',
      color: 'black',

      width: '1200px',
      margin: 'auto',
      padding: '1em 2em',
    }
  end
end

nav_link.rb

class NavLink
  include Clearwater::Component
  
  attr_reader :label, :href
  
  def initialize label, href
    @label = label
    @href = href
  end
  
  def render
    Link.new({ href: href, style: style }, label)
  end
  
  def style
    {
      display: 'inline-block',
      padding: '1em 2em',
    }
  end
end