Packages

sigma_kit

0.0.21
0.0.33 0.0.32 0.0.31 0.0.30 0.0.29 0.0.28 0.0.27 0.0.26 0.0.25 0.0.24 0.0.23 0.0.22 0.0.21 0.0.20 0.0.19 0.0.18 0.0.17 0.0.16 0.0.15 0.0.14 0.0.13 0.0.12 0.0.11 0.0.10 0.0.9 0.0.8 0.0.7 0.0.6 0.0.5 0.0.4 0.0.3 0.0.2 0.0.1

An Appplication kit for Phoenix based applications. SigmaKit Provides UI components, helpers, and opinionated frameowrk extensions for quickly devloping rich Phoenix LiveView based applications.

HexDocs

Current section

Files

Jump to
Readme
33 Versions
8 Dependencies
Dependants
Files
Activity
sigma_kit lib components headers.ex
Raw

lib/components/headers.ex 

defmodule SigmaKit.Components.Headers do

  use Phoenix.LiveComponent

  import SigmaKit.Components.Icons, only: [icon: 1]



  attr :title, :string, required: true

  attr :subtitle, :string, default: nil

  attr :identity, :string, default: nil

  slot :action

  attr :tag, :string

  attr :tag_style, :atom, values: [:success, :danger, :info], default: :info



  slot :breadcrumb do

    attr :label, :string

    attr :to, :any

  end



  def page_header(assigns) do

    ~H"""

    <div class="mb-16 md:mb-8">

      <div class="flex flex-col md:flex-row justify-center md:justify-between items-center text-center md:text-start">

        <div>

          <div :if={assigns[:identity]} class="mb-2">

            <div class="uppercase text-xs font-medium text-zinc-500 px-2 py-0.5 bg-gray-50 inline rounded-lg border border-gray-200">

              {@identity}

            </div>

          </div>

          <div class="text-4xl font-light">{@title}</div>

          <div :if={assigns[:subtitle]}>{@subtitle}</div>

        </div>

        <div

          :if={@action != []}

          class="flex flex-col md:flex-row gap-4 items-center justify-center my-1 mt-2 md:my-0 md:justify-start"

        >

          <div :for={action <- @action} class="flex gap-4">

            {render_slot(action)}

          </div>

        </div>

      </div>

      <nav

        :if={SigmaKit.Util.present?(@breadcrumb)}

        class="py-1 text-gray-700 rounded-lg"

        aria-label="Breadcrumb"

      >

        <div class="flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse mb-0 justify-center md:justify-normal">

          <%= for breadcrumb <- @breadcrumb do %>

            <.link

              class="text-sm font-medium text-gray-700 hover:text-primary-600"

              navigate={breadcrumb.to}

            >

              {breadcrumb.label}

            </.link>

            <.icon name="hero-chevron-right" class="w-3 h-3 mx-2 mt-1 text-gray-800" />

          <% end %>

          <div class="mx-1 text-sm font-medium text-gray-400 md:mx-2">

            {@title}

          </div>

          <div

            :if={assigns[:tag]}

            class={[

              "text-xs font-semibold me-2 px-2 py-0.5 rounded-sm hidden flex",

              @tag_style == :info && "bg-blue-100 text-blue-800",

              @tag_style == :danger && "bg-red-100 text-red-800",

              @tag_style == :success && "bg-green-100 text-green-800"

            ]}

          >

            {@tag}

          </div>

        </div>

      </nav>

    </div>

    """

  end



  attr :title, :string, required: true

  attr :divide, :boolean, default: false

  slot :action



  def section_header(assigns) do

    ~H"""

    <div class={[

      "flex flex-col md:flex-row justify-center md:justify-between items-center mt-16 md:mt-8 mb-8 md:mb-2",

      @divide && "border-b border-gray-200 pb-1.5"

    ]}>

      <div class="text-lg font-black uppercase text-center md:text-start">{@title}</div>

      <div>

        <div :if={@action != []} class="flex gap-4 mt-4 md:mt-0">

          <div :for={action <- @action}>

            {render_slot(action)}

          </div>

        </div>

      </div>

    </div>

    """

  end

end