<%= component "header" do %>

<% if @previous_page %> <%= icon "chevron-left", size: 4, class: "hover:text-indigo-800" %> <% else %> <%= icon "chevron-left", size: 4, class: "opacity-20" %> <% end %> <% if @next_page %> <%= icon "chevron-right", size: 4, class: "hover:text-indigo-800" %> <% else %> <%= icon "chevron-right", size: 4, class: "opacity-20" %> <% end %>

<% end %>

<% if @page.header? %>

<%= @page.title %>

<% end %>

<%= @page_content %>

<% if @page.footer? %>

<% if @previous_page %> <%= icon "arrow-left", size: 4, class: "hover:text-indigo-800" %> <%= @previous_page.title %> <% end %> <% if @next_page %> <%= @next_page.title %> <%= icon "arrow-right", size: 4, class: "hover:text-indigo-800" %> <% end %>

<% end %>