@@ -29,6 +29,7 @@ defmodule <%= @web_namespace %>.CoreComponents do
29
29
"""
30
30
attr :id , :string , doc: "the optional id of flash container"
31
31
attr :flash , :map , default: % { } , doc: "the map of flash messages to display"
32
+ attr :title , :string , default: nil
32
33
attr :kind , :atom , values: [ :info , :error ] , doc: "used for styling and flash lookup"
33
34
attr :rest , :global , doc: "the arbitrary HTML attributes to add to the flash container"
34
35
@@ -53,7 +54,10 @@ defmodule <%= @web_namespace %>.CoreComponents do
53
54
< div class = "flex gap-2 " >
54
55
< . icon :if = { @ kind == :info } name = "hero-information-circle-mini " class = "h-5 w-5 shrink-0 " />
55
56
< . icon :if = { @ kind == :error } name = "hero-exclamation-circle-mini " class = "h-5 w-5 shrink-0 " />
56
- < p class = "text-sm leading-5 " > { msg } </ p >
57
+ < div class = "text-sm leading-5 " >
58
+ < p :if = { @ title } class = "font-semibold " > { @ title } </ p >
59
+ < p > { msg } </ p >
60
+ </ div >
57
61
< div class = "flex-1 " />
58
62
< button type = "button " class = "group flex self-start " aria-label = <%= maybe_heex_attr_gettext.( "close " , @gettext) % > >
59
63
< . icon name = "hero-x-mark-solid " class = "h-5 w-5 opacity-40 group-hover:opacity-70 " />
@@ -64,7 +68,7 @@ defmodule <%= @web_namespace %>.CoreComponents do
64
68
end
65
69
66
70
@ doc """
67
- Shows the flash group with standard content.
71
+ Shows the flash group with standard titles and content.
68
72
69
73
## Examples
70
74
@@ -81,23 +85,23 @@ defmodule <%= @web_namespace %>.CoreComponents do
81
85
< . flash
82
86
id = "client-error "
83
87
kind = { :error }
88
+ title = <%= maybe_heex_attr_gettext.( "We can't find the internet " , @gettext) % >
84
89
phx-disconnected={ show ( ".phx-client-error #client-error" ) }
85
90
phx-connected={ hide ( "#client-error" ) }
86
91
hidden
87
92
>
88
- < span class = "font-semibold " > <%= maybe_eex_gettext . ( "We can't find the internet!" , @ gettext ) %> </ span >
89
93
<%= maybe_eex_gettext . ( "Attempting to reconnect" , @ gettext ) %>
90
94
< . icon name = "hero-arrow-path " class = "ml-1 h-3 w-3 motion-safe:animate-spin " />
91
95
</ . flash >
92
96
93
97
< . flash
94
98
id = "server-error "
95
99
kind = { :error }
100
+ title = <%= maybe_heex_attr_gettext.( "Something went wrong! ", @gettext) % >
96
101
phx-disconnected = { show ( ".phx-server-error #server-error" ) }
97
102
phx-connected = { hide ( "#server-error" ) }
98
103
hidden
99
104
>
100
- < span class = "font-semibold " > <%= maybe_eex_gettext . ( "Something went wrong!" , @ gettext ) %> </ span >
101
105
<%= maybe_eex_gettext . ( "Hang in there while we get back on track" , @ gettext ) %>
102
106
< . icon name = "hero-arrow-path " class = "ml-1 h-3 w-3 motion-safe:animate-spin " />
103
107
</ . flash >
0 commit comments