Packages
mbta_metro
0.2.3
1.1.2
1.1.1
1.1.0
1.0.1
1.0.0
0.3.3
0.3.2
0.3.1
0.3.0
0.2.4
0.2.3
0.2.2
0.2.1
0.2.0
0.1.21
0.1.20
0.1.19
0.1.18
0.1.17
0.1.16
0.1.15
0.1.14
0.1.13
0.1.12
0.1.11
0.1.10
0.1.9
0.1.8
0.1.7
0.1.6
0.1.5
0.1.4
0.1.3
0.1.2
0.1.1
0.1.0
0.0.65
0.0.64
0.0.62
0.0.61
0.0.60
0.0.58
0.0.57
0.0.56
0.0.55
0.0.54
0.0.53
0.0.52
0.0.51
0.0.50
0.0.49
0.0.48
0.0.47
0.0.46
0.0.45
0.0.44
0.0.43
0.0.42
0.0.41
0.0.40
0.0.39
0.0.34
0.0.30
0.0.27
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
0.0.1-alpha
A Phoenix LiveView component library
Current section
Files
Jump to
Current section
Files
lib/mbta_metro/components/badge_stack.ex
defmodule MbtaMetro.Components.BadgeStack do
@moduledoc false
use Phoenix.Component
import MbtaMetro.Components.Badge, only: [badge: 1]
attr :background, :string, default: "white"
attr :class, :string, default: ""
attr :badges, :list, required: true
attr :variant, :string, required: true, values: ["circle", "square"]
def badge_stack(%{variant: "circle"} = assigns) do
circle_stack(assigns)
end
def badge_stack(%{variant: "square"} = assigns) do
square_stack(assigns)
end
defp circle_stack(assigns) do
~H"""
<div class="inline-flex -space-x-0.5">
<.badge
:for={{[class, text], index} <- Enum.with_index(@badges)}
variant="circle"
class={"ring-#{@background} ring-2 #{zindex(index)} #{@class} #{class}"}
>
{text}
</.badge>
</div>
"""
end
defp square_stack(assigns) do
~H"""
<div class="inline-flex -space-x-0.5 h-5 overflow-hidden">
<%= for {[class, text], index} <- Enum.with_index(@badges) do %>
<.badge
variant="square"
class={"px-2 first:px-2.5 [&:not(:first-child)]:rounded-l-none [&:not(:last-child)]:rounded-r-none #{zindex(index)} #{@class} #{class}"}
>
{text}
</.badge>
<%= if index < Kernel.length(@badges) - 1 do %>
<div class={"inline-flex bg-#{@background} -mt-0.5 h-6 w-1 #{zindex(index)} transform rotate-[17deg]"}>
</div>
<% end %>
<% end %>
</div>
"""
end
defp zindex(index) do
"z-#{50 - index * 10}"
end
end