Headerbox section

Headerbox is a component designed for back-office headers. It can display:

Title
Additional info
Page controls

It has five slots:

:title for the title
:description for additional information
:breadcrumbs for the breadcrumb navigation (visible only on wide screens)
:controls for control buttons
:tabbar for a set of tabs

If a slot is empty, no HTML elements are shown. The :title and :description slots are in the central block of the component. The :breadcrumbs slot is above it. On the right, there's a container for control buttons, which can be added via the :controls slot. Underneath, spanning the width of the component, is a container for a "tabs" set via the :tabbar slot.

Basic header section

<div class="p-6">
  <div class="flex w-full justify-between pb-6">
    <div>
      <h1 class="text-bulma text-moon-20 font-medium">Custom events</h1>
      <p class="text-trunks text-moon-14">
        Manage your team members and their account permissions here.
      </p>
    </div>
  <div id="new-event-form">
  <button class="flex justify-center items-center relative overflow-hidden active:scale-90 transition-all duration-200 font-medium group z-0 shrink-0 whitespace-nowrap select-none text-goten bg-piccolo text-moon-14 rounded-moon-s-sm h-10 gap-2 px-4" phx-click="[[&quot;dispatch&quot;,{&quot;to&quot;:&quot;#create-event&quot;,&quot;event&quot;:&quot;moonds:drawer:open&quot;}]]">
    Create new
    <span class="block absolute inset-0 pointer-events-none transition-[background-color_0.2s_ease-in-out z-[-1] hover-supported:group-hover:bg-heles"></span>
  </button>
</div>

Tabs

Utilizes a moon_live tabs component.

use MoonLive

<div class="bg-gohan rounded-moon-s-md ">
  <.tabs :let={tabs} id="segment-md" initial_tab={@initial_tab}>
    <.tabs_list {tabs} variant="segment" size="sm">
      <:tab rest={%{:"phx-click" => JS.patch("/")}}>Event list</:tab>
      <:tab rest={%{:"phx-click" => JS.patch("/compose_message")}}>
        Compose message
      </:tab>
      <:tab rest={%{:"phx-click" => JS.patch("/category_management")}}>
        Category management
      </:tab>
      <:tab>Simulation</:tab>
    </.tabs_list>
  </.tabs>
</div>