page.cr

class TaskList::ShowPage < BaseComponent
  needs task_list : TaskList
  
  def render
     mount DescriptionList.new(
      heading_title: ->{ text task_list.title },
      heading_subtitle: -> { 
        text "Number of tasks"
        # Render a fancy badge with the task count
        mount Badge.new(task_list.tasks.count) 
      },
      # Or call another method in the Proc :D
      list: -> { render_list }
    )
  end
  
  def render_list
    ul do
      task_list.tasks.each do |task|
        li task.title
      end
    end
  end
end

class DescriptionList < BaseComponent
  needs heading_title : Proc(Nil)
  needs heading_subtitle : Proc(Nil)
  needs list : Proc(Nil)

  def render
    mount Breeze::Panel.new do
      render_main_heading
      render_list
    end
  end

  def render_main_heading
    div class: "px-4 py-5 border-b border-gray-200 sm:px-6" do
      h3 class: "text-lg leading-6 font-medium text-gray-900" do
        heading_title.call
      end
      div class: "mt-2" do
        heading_subtitle.call
      end
    end
  end

  def render_list
    div class: "px-4 py-5 sm:p-0" do
      ul do
        list.call
      end
    end
  end
end