Packages

sigma_kit

0.0.23
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 containers.ex
Raw

lib/components/containers.ex 

defmodule SigmaKit.Components.Containers do

  use Phoenix.LiveComponent



  attr :shadow, :boolean, default: true, doc: "When true uses a shadow for emphasis"

  attr :title, :string, default: nil, doc: "The title of the container"

  attr :class, :any, default: "", doc: "Additional classes to apply to the container"

  attr :fill, :boolean, default: false, doc: "When true the box will flex to the container"



  slot :action_bar, doc: "A slot for action buttons"

  slot :inner_block, doc: "The main content of the container"

  slot :footer, doc: "Content for a bottom section"



  def box(assigns) do

    ~H"""

    <div class={[

      "rounded-lg border",

      @shadow && "shadow-lg border-zinc-100",

      !@shadow && "border-zinc-200",

      @fill && "h-full w-full max-h-full max-w-full",

      @class

    ]}>

      <div :if={!Enum.empty?(@action_bar) || @title} class="flex justify-between my-2 h-8 px-4 mt-4">

        <div class="font-medium text-lg">

          {@title}

        </div>

        <div class="flex gap-4 justify-end">

          {render_slot(@action_bar)}

        </div>

      </div>

      <div class={["flex flex-col divide-y", @fill && "w-full h-full max-h-full max-w-full"]}>

        <div class="p-4 h-full w-full max-h-full max-w-full overflow-hidden">

          {render_slot(@inner_block)}

        </div>

        <div :if={@footer != []} class="p-4">

          {render_slot(@footer)}

        </div>

      </div>

    </div>

    """

  end



  attr :data, :any, required: true

  slot :inner_block



  def async_container(assigns) do

    ~H"""

    <.async_result :let={data} assign={@data}>

      <:loading>

        <div class="flex justify-center items-center p-8">

          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 150" width="150px">

            <path

              fill="none"

              stroke="#D004FF"

              stroke-width="15"

              stroke-linecap="round"

              stroke-dasharray="300 385"

              stroke-dashoffset="0"

              d="M275 75c0 31-27 50-50 50-58 0-92-100-150-100-28 0-50 22-50 50s23 50 50 50c58 0 92-100 150-100 24 0 50 19 50 50Z"

            >

              <animate

                attributeName="stroke-dashoffset"

                calcMode="spline"

                dur="2"

                values="685;-685"

                keySplines="0 0 1 1"

                repeatCount="indefinite"

              >

              </animate>

            </path>

          </svg>

        </div>

      </:loading>

      <:failed :let={reason}>

        <div class="text-center text-red-500 font-bold py-8">{reason}</div>

      </:failed>

      {render_slot(@inner_block, data)}

    </.async_result>

    """

  end

end