50 lines
1.4 KiB
Elixir
50 lines
1.4 KiB
Elixir
defmodule ToweropsWeb.Components.Breadcrumbs do
|
|
@moduledoc """
|
|
Reusable breadcrumb navigation component.
|
|
"""
|
|
use Phoenix.Component
|
|
|
|
import ToweropsWeb.CoreComponents, only: [icon: 1]
|
|
|
|
@doc """
|
|
Renders a breadcrumb navigation bar.
|
|
|
|
Each item in `items` should be a map with:
|
|
- `:label` (required) — the display text
|
|
- `:navigate` (optional) — path for navigation; omit for the current (last) page
|
|
|
|
## Examples
|
|
|
|
<.breadcrumb items={[
|
|
%{label: "Dashboard", navigate: ~p"/dashboard"},
|
|
%{label: "Devices", navigate: ~p"/devices"},
|
|
%{label: "My Device"}
|
|
]} />
|
|
"""
|
|
attr :items, :list, required: true
|
|
|
|
def breadcrumb(assigns) do
|
|
~H"""
|
|
<div class="flex items-center gap-2 text-sm mb-4 text-gray-600 dark:text-gray-400">
|
|
<ul>
|
|
<%= for {item, idx} <- Enum.with_index(@items) do %>
|
|
<li>
|
|
<%= if idx == 0 && Map.has_key?(item, :navigate) do %>
|
|
<.link navigate={item.navigate} class="inline-flex items-center gap-1">
|
|
<.icon name="hero-home-mini" class="h-4 w-4" />
|
|
{item.label}
|
|
</.link>
|
|
<% else %>
|
|
<%= if Map.has_key?(item, :navigate) do %>
|
|
<.link navigate={item.navigate}>{item.label}</.link>
|
|
<% else %>
|
|
{item.label}
|
|
<% end %>
|
|
<% end %>
|
|
</li>
|
|
<% end %>
|
|
</ul>
|
|
</div>
|
|
"""
|
|
end
|
|
end
|