Packages
petal_components
0.19.5
4.7.0
4.6.2
4.6.1
4.6.0
4.5.0
4.4.0
4.3.0
4.2.1
4.2.0
4.1.2
4.1.1
4.1.0
4.0.12
4.0.11
4.0.10
4.0.6
4.0.5
4.0.4
4.0.3
4.0.1
3.2.2
3.2.1
3.2.0
3.1.0
3.0.2
3.0.1
3.0.0
2.9.3
2.9.2
retired
2.9.1
retired
2.9.0
retired
2.8.4
2.8.3
2.8.2
2.8.1
2.8.0
2.7.4
2.7.3
2.7.2
2.7.1
2.7.0
2.6.1
2.6.0
2.5.2
2.5.1
2.5.0
2.4.3
2.4.2
2.4.1
2.4.0
2.3.0
2.2.1
2.2.0
2.1.2
2.1.1
2.1.0
2.0.6
2.0.5
2.0.4
2.0.3
2.0.2
2.0.1
2.0.0
1.9.3
1.9.2
1.9.1
1.9.0
1.8.0
1.7.1
1.7.0
1.6.2
1.6.1
1.6.0
1.5.5
1.5.4
1.5.3
1.5.2
1.5.1
1.5.0
1.4.9
1.4.8
1.4.7
1.4.6
1.4.5
1.4.4
1.4.3
1.4.2
1.4.1
1.4.0
1.3.0
1.2.14
1.2.13
1.2.12
1.2.11
1.2.10
1.2.9
1.2.8
1.2.7
1.2.6
1.2.5
1.2.4
1.2.3
1.2.2
1.2.1
1.2.0
1.1.6
1.1.5
1.1.4
1.1.3
1.1.2
1.1.1
1.1.0
1.0.8
1.0.7
1.0.6
1.0.5
1.0.4
1.0.3
1.0.2
1.0.1
1.0.0
0.19.10
0.19.9
0.19.8
0.19.7
0.19.6
0.19.5
0.19.4
0.19.3
0.19.2
0.19.1
0.19.0
0.18.5
0.18.4
0.18.3
0.18.2
0.18.1
0.18.0
0.17.7
0.17.6
0.17.5
0.17.4
0.17.3
0.17.2
0.17.1
0.17.0
0.16.0
0.15.0
0.14.1
0.14.0
0.13.7
0.13.6
0.13.5
0.13.4
0.13.3
0.13.2
0.13.1
0.13.0
0.12.0
0.11.4
0.11.3
0.11.2
0.11.1
0.11.0
0.10.8
0.10.7
0.10.6
0.10.5
0.10.4
0.10.3
0.10.2
0.10.1
0.10.0
0.9.3
0.9.2
0.9.1
0.9.0
0.8.0
0.7.0
0.6.1
0.6.0
0.5.1
0.5.0
0.4.0
0.3.2
0.3.1
0.3.0
0.2.2
0.2.1
0.2.0
0.1.0
Shadcn-style Phoenix LiveView components that AI assistants can actually use. Pair with the MCP server so AI coding tools can inspect the real component API.
Current section
Files
Jump to
Current section
Files
lib/petal_components/alert.ex
defmodule PetalComponents.Alert do
use Phoenix.Component
import PetalComponents.Helpers
attr(:color, :string,
default: "info",
values: ["info", "success", "warning", "danger"]
)
attr(:with_icon, :boolean, default: false, doc: "adds some icon base classes")
attr(:class, :string, default: "", doc: "CSS class for parent div")
attr(:heading, :string, default: nil, doc: "label your heading")
attr(:label, :string, default: nil, doc: "label your alert")
attr(:rest, :global)
attr(:close_button_properties, :list,
default: nil,
doc: "a list of properties passed to the close button"
)
slot(:inner_block)
def alert(assigns) do
assigns =
assigns
|> assign(:classes, alert_classes(assigns))
~H"""
<%= unless label_blank?(@label, @inner_block) do %>
<div {@rest} class={@classes}>
<%= if @with_icon do %>
<div class="self-start flex-shrink-0 pt-0.5 w-6 h-6">
<.get_icon color={@color} />
</div>
<% end %>
<div class="w-full flex-0">
<div class="flex items-start justify-between">
<div>
<%= if @heading do %>
<div class="pt-1 font-bold">
<%= @heading %>
</div>
<% end %>
<div class="py-1 font-medium">
<%= render_slot(@inner_block) || @label %>
</div>
</div>
<%= if @close_button_properties do %>
<button
class={
build_class(["p-2 mouse-hover flex hover:rounded", get_dismiss_icon_classes(@color)])
}
{@close_button_properties}
>
<Heroicons.x_mark solid class="self-start w-4 h-4" />
</button>
<% end %>
</div>
</div>
</div>
<% end %>
"""
end
defp alert_classes(opts) do
opts = %{
color: opts[:color] || "info",
class: opts[:class] || ""
}
base_classes = "w-full flex text-sm rounded items-center focus:outline-none px-4 py-2 gap-3"
color_css = get_color_classes(opts.color)
custom_classes = opts.class
build_class([base_classes, color_css, custom_classes])
end
defp get_color_classes("info"),
do: "text-blue-800 bg-blue-100 dark:bg-blue-200 dark:text-blue-800"
defp get_color_classes("success"),
do: "text-green-800 bg-green-100 dark:bg-green-200 dark:text-green-800"
defp get_color_classes("warning"),
do: "text-yellow-800 bg-yellow-100 dark:bg-yellow-200 dark:text-yellow-800"
defp get_color_classes("danger"),
do: "text-red-800 bg-red-100 dark:bg-red-200 dark:text-red-800"
defp get_dismiss_icon_classes("info"),
do:
"bg-blue-100 dark:bg-blue-200 hover:bg-blue-200 dark:hover:bg-blue-300 hover:text-blue-800 dark:hover:text-blue-900"
defp get_dismiss_icon_classes("success"),
do:
"bg-green-100 dark:bg-green-200 hover:bg-green-200 dark:hover:bg-green-300 hover:text-green-800 dark:hover:text-green-900"
defp get_dismiss_icon_classes("warning"),
do:
"bg-yellow-100 dark:bg-yellow-200 hover:bg-yellow-200 dark:hover:bg-yellow-300 hover:text-yellow-800 dark:hover:text-yellow-900"
defp get_dismiss_icon_classes("danger"),
do:
"bg-red-100 dark:bg-red-200 hover:bg-red-200 dark:hover:bg-red-300 hover:text-red-800 dark:hover:text-red-900"
defp get_icon(%{color: "info"} = assigns) do
~H"""
<Heroicons.information_circle />
"""
end
defp get_icon(%{color: "success"} = assigns) do
~H"""
<Heroicons.check_circle />
"""
end
defp get_icon(%{color: "warning"} = assigns) do
~H"""
<Heroicons.exclamation_circle />
"""
end
defp get_icon(%{color: "danger"} = assigns) do
~H"""
<Heroicons.x_circle />
"""
end
defp label_blank?(label, inner_block) do
(!label || label == "") && inner_block == []
end
end