Class: Tailwinds::ButtonComponent

Inherits:
BaseComponent show all
Defined in:
app/components/tailwinds/button_component.rb

Overview

Default Tramway button

Constant Summary

Constants inherited from BaseComponent

Tailwinds::BaseComponent::TYPE_COLOR_MAP

Instance Method Summary collapse

Methods inherited from BaseComponent

#normalized_type, #resolved_color, #type_color

Methods included from Tramway::Helpers::ViewsHelper

#tramway_back_button, #tramway_badge, #tramway_button, #tramway_cell, #tramway_container, #tramway_flash, #tramway_form_for, #tramway_header, #tramway_row, #tramway_table, #tramway_title

Methods included from Tramway::Helpers::ComponentHelper

#component

Methods included from Tramway::Helpers::DecorateHelper

#tramway_decorate

Instance Method Details

#classes ⇒ Object 



25
26
27
28
29
30
 
# File 'app/components/tailwinds/button_component.rb', line 25

def classes
  (default_classes +
    light_mode_classes +
    dark_mode_classes +
    (link ? %w[px-1 h-fit] : ['cursor-pointer'])).compact.join(' ')
end

#dark_mode_classes ⇒ Object 



47
48
49
50
51
52
53
 
# File 'app/components/tailwinds/button_component.rb', line 47

def dark_mode_classes
  [
    "dark:bg-#{resolved_color}-600",
    "dark:hover:bg-#{resolved_color}-800",
    'dark:text-gray-300'
  ]
end

#default_classes ⇒ Object 



32
33
34
35
36
37
 
# File 'app/components/tailwinds/button_component.rb', line 32

def default_classes
  [
    'btn', 'btn-primary', 'flex', 'flex-row', 'font-bold', 'rounded-sm', 'flex', 'flex-row', 'whitespace-nowrap',
    'items-center', 'gap-1', size_classes.to_s, options[:class].to_s
  ]
end

#light_mode_classes ⇒ Object 



39
40
41
42
43
44
45
 
# File 'app/components/tailwinds/button_component.rb', line 39

def light_mode_classes
  [
    "bg-#{resolved_color}-500",
    "hover:bg-#{resolved_color}-700",
    'text-white'
  ]
end

#size_classes ⇒ Object 



17
18
19
20
21
22
23
 
# File 'app/components/tailwinds/button_component.rb', line 17

def size_classes
  {
    small: 'text-sm py-1 px-2 rounded',
    middle: 'py-2 px-4',
    large: 'text-lg px-5 py-3'
  }[size]
end