Divider

Content separation elements

Preview

OR

Props Editor

✅ JSON is valid - Click "Preview Update" to see changes

Source Code

defmodule FeenixUiWeb.Components.DividerComponent do
  use Phoenix.Component

  def render(assigns) do
    assigns = assign_new(assigns, :text, fn -> nil end)
    assigns = assign_new(assigns, :orientation, fn -> "horizontal" end)

    ~H"""
    <%= if @orientation == "horizontal" do %>
      <div class="relative">
        <div class="absolute inset-0 flex items-center">
          <div class="w-full border-t border-gray-300"></div>
        </div>
        <%= if @text do %>
          <div class="relative flex justify-center text-sm">
            <span class="px-2 bg-white text-gray-500"><%= @text %></span>
          </div>
        <% end %>
      </div>
    <% else %>
      <div class="flex items-center">
        <div class="h-full border-l border-gray-300"></div>
        <%= if @text do %>
          <span class="px-2 text-sm text-gray-500"><%= @text %></span>
        <% end %>
      </div>
    <% end %>
    """
  end
end