174 lines
4.6 KiB
Elixir
174 lines
4.6 KiB
Elixir
defmodule RiverConnectWeb.Components.UI.Alert do
|
|
@moduledoc """
|
|
Implementation of alert component for displaying important messages to users.
|
|
|
|
Alerts are used to communicate status, warnings, or contextual feedback to users.
|
|
They can be configured with different variants to indicate severity and typically
|
|
consist of a title and a description.
|
|
|
|
## Examples:
|
|
|
|
<.alert>
|
|
<.alert_title>Note</.alert_title>
|
|
<.alert_description>This is a standard informational alert.</.alert_description>
|
|
</.alert>
|
|
|
|
<.alert variant="destructive">
|
|
<.alert_title>Error</.alert_title>
|
|
<.alert_description>
|
|
There was a problem with your request. Please try again.
|
|
</.alert_description>
|
|
</.alert>
|
|
|
|
<.alert>
|
|
<span class="mr-3">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24">
|
|
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M9 12l2 2l4-4"></path>
|
|
</svg>
|
|
</span>
|
|
<.alert_title>Success</.alert_title>
|
|
<.alert_description>Your changes have been saved successfully.</.alert_description>
|
|
</.alert>
|
|
"""
|
|
use RiverConnectWeb.Components.UI, :component
|
|
|
|
@doc """
|
|
Renders an alert container.
|
|
|
|
The alert component displays important messages or feedback to users with styling
|
|
appropriate for the context.
|
|
|
|
## Options
|
|
|
|
* `:variant` - The visual style of the alert. Available variants:
|
|
* `"default"` - Standard alert styling (default)
|
|
* `"destructive"` - Red-tinted styling for errors and warnings
|
|
* `:class` - Additional CSS classes to apply to the alert container.
|
|
|
|
## Examples
|
|
|
|
<.alert>
|
|
<.alert_title>Information</.alert_title>
|
|
<.alert_description>This is an informational message.</.alert_description>
|
|
</.alert>
|
|
|
|
<.alert variant="destructive" class="mt-4">
|
|
<.alert_title>Warning</.alert_title>
|
|
<.alert_description>This action cannot be undone.</.alert_description>
|
|
</.alert>
|
|
"""
|
|
attr :variant, :string, default: "default", values: ~w(default destructive)
|
|
attr :class, :string, default: nil
|
|
slot :inner_block, required: true
|
|
attr :rest, :global, default: %{}
|
|
|
|
def alert(assigns) do
|
|
assigns = assign(assigns, :variant_class, variant(assigns))
|
|
|
|
~H"""
|
|
<div
|
|
role="alert"
|
|
data-part="root"
|
|
class={
|
|
classes([
|
|
"relative w-full rounded-lg border p-4 [&>span~*]:pl-7 [&>span+div]:translate-y-[-3px] [&>span]:absolute [&>span]:left-4 [&>span]:top-4",
|
|
@variant_class,
|
|
@class
|
|
])
|
|
}
|
|
{@rest}
|
|
>
|
|
{render_slot(@inner_block)}
|
|
</div>
|
|
"""
|
|
end
|
|
|
|
@doc """
|
|
Renders an alert title.
|
|
|
|
The title component is used to provide a concise heading for the alert message.
|
|
|
|
## Options
|
|
|
|
* `:class` - Additional CSS classes to apply to the title.
|
|
|
|
## Examples
|
|
|
|
<.alert_title>Success</.alert_title>
|
|
<.alert_title class="text-primary">Important Notice</.alert_title>
|
|
"""
|
|
attr :class, :string, default: nil
|
|
attr :rest, :global, include: ~w(disabled form name value)
|
|
slot :inner_block, required: true
|
|
|
|
def alert_title(assigns) do
|
|
~H"""
|
|
<h5
|
|
class={
|
|
classes([
|
|
"mb-1 font-medium leading-none tracking-tight",
|
|
@class
|
|
])
|
|
}
|
|
{@rest}
|
|
>
|
|
{render_slot(@inner_block)}
|
|
</h5>
|
|
"""
|
|
end
|
|
|
|
@doc """
|
|
Renders an alert description.
|
|
|
|
The description provides more detailed information about the alert message.
|
|
|
|
## Options
|
|
|
|
* `:class` - Additional CSS classes to apply to the description.
|
|
|
|
## Examples
|
|
|
|
<.alert_description>Your account has been updated successfully.</.alert_description>
|
|
<.alert_description class="text-gray-600">
|
|
Please review the changes before continuing.
|
|
</.alert_description>
|
|
"""
|
|
attr :class, :string, default: nil
|
|
attr :rest, :global, include: ~w(disabled form name value)
|
|
slot :inner_block, required: true
|
|
|
|
def alert_description(assigns) do
|
|
~H"""
|
|
<div
|
|
class={
|
|
classes([
|
|
"text-sm [&_p]:leading-relaxed",
|
|
@class
|
|
])
|
|
}
|
|
{@rest}
|
|
>
|
|
{render_slot(@inner_block)}
|
|
</div>
|
|
"""
|
|
end
|
|
|
|
@variants %{
|
|
variant: %{
|
|
"default" => "bg-background text-foreground",
|
|
"destructive" =>
|
|
"bg-background border-destructive/50 text-destructive dark:border-destructive [&>span]:text-destructive"
|
|
}
|
|
}
|
|
|
|
@default_variants %{
|
|
variant: "default"
|
|
}
|
|
|
|
defp variant(variants) do
|
|
variants = Map.merge(@default_variants, variants)
|
|
|
|
Enum.map_join(variants, " ", fn {key, value} -> @variants[key][value] end)
|
|
end
|
|
end
|