93 lines
2.7 KiB
Elixir
93 lines
2.7 KiB
Elixir
defmodule RiverConnectWeb.Components.UI.Badge do
|
|
@moduledoc """
|
|
Implementation of badge component for displaying short labels, statuses, or counts.
|
|
|
|
Badges are small UI elements typically used to highlight status, categories, or counts
|
|
in a compact format. They are designed to be visually distinct and draw attention to
|
|
important information.
|
|
|
|
## Examples:
|
|
|
|
<.badge>New</.badge>
|
|
<.badge variant="secondary">Beta</.badge>
|
|
<.badge variant="destructive">Error</.badge>
|
|
<.badge variant="outline">Version 1.0</.badge>
|
|
|
|
<div class="flex gap-2">
|
|
<.badge>Default</.badge>
|
|
<.badge variant="secondary">Secondary</.badge>
|
|
<.badge variant="destructive">Destructive</.badge>
|
|
<.badge variant="outline">Outline</.badge>
|
|
</div>
|
|
"""
|
|
use RiverConnectWeb.Components.UI, :component
|
|
|
|
@doc """
|
|
Renders a badge component.
|
|
|
|
## Options
|
|
|
|
* `:class` - Additional CSS classes to apply to the badge.
|
|
* `:variant` - The visual style of the badge. Available variants:
|
|
* `"default"` - Primary color with white text (default)
|
|
* `"secondary"` - Secondary color with contrasting text
|
|
* `"destructive"` - Typically red, for warning or error states
|
|
* `"outline"` - Bordered style with no background
|
|
|
|
## Examples
|
|
|
|
<.badge>Badge</.badge>
|
|
<.badge variant="destructive">Warning</.badge>
|
|
<.badge variant="outline" class="text-sm">Custom</.badge>
|
|
"""
|
|
attr :class, :string, default: nil
|
|
|
|
attr :variant, :string,
|
|
values: ~w(default secondary destructive outline),
|
|
default: "default",
|
|
doc: "the badge variant style"
|
|
|
|
attr :rest, :global
|
|
slot :inner_block, required: true
|
|
|
|
def badge(assigns) do
|
|
assigns = assign(assigns, :variant_class, variant(assigns))
|
|
|
|
~H"""
|
|
<div
|
|
class={
|
|
classes([
|
|
"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
|
|
@variant_class,
|
|
@class
|
|
])
|
|
}
|
|
{@rest}
|
|
>
|
|
{render_slot(@inner_block)}
|
|
</div>
|
|
"""
|
|
end
|
|
|
|
@variants %{
|
|
variant: %{
|
|
"default" => "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
|
|
"secondary" =>
|
|
"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
|
"destructive" =>
|
|
"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
|
|
"outline" => "text-foreground"
|
|
}
|
|
}
|
|
|
|
@default_variants %{
|
|
variant: "default"
|
|
}
|
|
|
|
defp variant(props) do
|
|
variants = Map.merge(@default_variants, props)
|
|
|
|
Enum.map_join(variants, " ", fn {key, value} -> @variants[key][value] end)
|
|
end
|
|
end
|