Simple CVA Navbar Example with Elixir Phoenix Daisy UI bgs

navbar.ex

defmodule YourAppWeb.Components.Navbar do
  use Phoenix.Component
  use CVA.Component

  variant(
    :size,
    [
      xs: "h-10 w-full mb-3",
      sm: "h-12 w-full mb-6",
      md: "h-14 w-full mb-8",
      lg: "h-16 w-full mb-10",
      xl: "h-20 w-full mb-12"
    ],
    default: :md
  )

  variant(
    :shade,
    [
      dark: "bg-base-300",
      medium: "bg-base-200",
      light: "bg-base-100"
    ],
    default: :light
  )

  variant(
    :shadow,
    [
      none: "shadow-none",
      sm: "shadow-sm",
      md: "shadow-md",
      lg: "shadow-lg",
      xl: "shadow-xl"
    ],
    default: :md
  )

  variant(
    :centering,
    [
      centered_full: "[&>nav]:items-center [&>nav]:justify-center",
      vertical_only: "[&>nav]:items-center",
      none: ""
    ],
    default: :vertical_only
  )

  attr :rest, :global

  slot :inner_block, doc: "Single content slot (alternative to start/center/end)"

  def page_navbar(assigns) do
    ~H"""
    <div class={@cva_class} {@rest}>
      <nav class="h-full flex">
        {render_slot(@inner_block)}
      </nav>
    </div>
    """
  end
end