Packages
noora
0.64.2
0.86.0
0.85.0
0.84.1
0.84.0
0.83.2
0.83.1
0.83.0
0.82.7
0.82.6
0.82.5
0.82.4
0.82.3
0.82.2
0.82.1
0.82.0
0.81.4
0.81.3
0.81.2
0.81.1
0.81.0
0.80.1
0.80.0
0.79.1
0.79.0
0.78.1
0.78.0
0.77.4
0.77.3
0.77.2
0.77.1
0.77.0
0.76.0
0.75.0
0.74.0
0.73.0
0.72.0
0.71.0
0.70.0
0.69.1
0.69.0
0.68.0
0.67.0
0.66.0
0.65.0
0.64.2
0.64.1
0.64.0
0.63.2
0.63.1
0.63.0
0.62.0
0.61.0
0.60.0
0.59.0
0.58.0
0.57.0
0.56.1
0.56.0
0.55.0
0.54.0
0.53.1
0.53.0
0.52.1
0.52.0
0.51.0
0.50.1
0.50.0
0.49.0
0.48.0
0.47.0
0.46.0
0.45.0
0.44.3
0.44.2
0.44.1
0.44.0
0.43.0
0.42.0
0.41.0
0.40.6
0.40.5
0.40.4
0.40.3
0.40.2
0.40.1
0.40.0
0.39.1
0.39.0
0.38.0
0.37.0
0.36.0
0.35.0
0.34.0
0.33.0
0.32.1
0.32.0
0.31.0
0.30.0
0.29.2
0.29.1
0.29.0
0.28.5
0.28.4
0.28.3
0.28.2
0.28.1
0.28.0
0.27.0
0.26.1
0.26.0
0.25.0
0.24.0
0.23.1
0.23.0
0.22.1
0.22.0
0.21.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.1
0.12.0
0.11.2
0.11.1
0.11.0
0.10.0
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.0
0.1.0
0.1.0-rc.2
0.1.0-rc.1
0.1.0-alpha.6
0.1.0-alpha.5
0.1.0-alpha.4
0.1.0-alpha.3
0.1.0-alpha.2
0.1.0-alpha.1
A component library for Phoenix LiveView applications
Current section
Files
Jump to
Current section
Files
lib/noora/banner.ex
defmodule Noora.Banner do
@moduledoc """
Renders a customizable banner component for displaying messages with different statuses (primary, error, success, warning, information), optional descriptions, and dismissible functionality. Supports a custom icon when the status is primary.
## Example
```elixir
<.banner id="notice" status="success" title="Changes saved successfully" />
```
"""
use Phoenix.Component
import Noora.DismissIcon
alias Noora.Icon
alias Phoenix.LiveView.JS
attr(:id, :string, required: true)
attr(:status, :string,
values: ~w(primary error success warning information),
default: "primary",
doc: "The status of the banner"
)
attr(:title, :string,
required: true,
doc: "The title of the banner"
)
attr(:description, :string, default: nil, doc: "The description of the banner")
attr(:dismissible, :boolean,
default: false,
doc: "Whether the banner is dismissible or not"
)
slot(:icon, required: false, doc: "A custom icon. Only applicable when status is primary")
def banner(assigns) do
~H"""
<div id={@id} class="noora-banner" data-status={@status}>
<.background_grid :if={@status == "primary"} />
<.icon status={@status} icon={@icon} />
<span data-part="title">{@title}</span>
<span :if={@description} data-part="dot">•</span>
<span :if={@description} data-part="description">{@description}</span>
<div :if={@dismissible} data-part="dismiss-icon">
<.dismiss_icon phx-click={JS.hide(to: "##{@id}")} />
</div>
</div>
"""
end
defp icon(%{status: "primary"} = assigns) do
~H"""
<div :if={@icon} data-part="icon">
{render_slot(@icon)}
</div>
"""
end
defp icon(%{status: status} = assigns) when status in ["error", "information"] do
~H"""
<div data-part="icon">
<Icon.alert_circle />
</div>
"""
end
defp icon(%{status: "success"} = assigns) do
~H"""
<div data-part="icon">
<Icon.circle_check />
</div>
"""
end
defp icon(%{status: "warning"} = assigns) do
~H"""
<div data-part="icon">
<Icon.alert_triangle />
</div>
"""
end
defp background_grid(assigns) do
~H"""
<svg
data-part="background"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1440 44"
preserveAspectRatio="xMidYMid slice"
fill="none"
>
<path
d="M0.5 44V0M10.5 44V0M20.5 44V0M30.5 44V0M40.5 44V0M50.5 44V0M60.5 44V0M70.5 44V0M80.5 44V0M90.5 44V0M100.5 44V0M110.5 44V0M120.5 44V0M130.5 44V0M140.5 44V0M150.5 44V0M160.5 44V0M170.5 44V0M180.5 44V0M190.5 44V0M200.5 44V0M210.5 44V0M220.5 44V0M230.5 44V0M240.5 44V0M250.5 44V0M260.5 44V0M270.5 44V0M280.5 44V0M290.5 44V0M300.5 44V0M310.5 44V0M320.5 44V0M330.5 44V0M340.5 44V0M350.5 44V0M360.5 44V0M370.5 44V0M380.5 44V0M390.5 44V0M400.5 44V0M410.5 44V0M420.5 44V0M430.5 44V0M440.5 44V0M450.5 44V0M460.5 44V0M470.5 44V0M480.5 44V0M490.5 44V0M500.5 44V0M510.5 44V0M520.5 44V0M530.5 44V0M540.5 44V0M550.5 44V0M560.5 44V0M570.5 44V0M580.5 44V0M590.5 44V0M600.5 44V0M610.5 44V0M620.5 44V0M630.5 44V0M640.5 44V0M650.5 44V0M660.5 44V0M670.5 44V0M680.5 44V0M690.5 44V0M700.5 44V0M710.5 44V0M720.5 44V0M730.5 44V0M740.5 44V0M750.5 44V0M760.5 44V0M770.5 44V0M780.5 44V0M790.5 44V0M800.5 44V0M810.5 44V0M820.5 44V0M830.5 44V0M840.5 44V0M850.5 44V0M860.5 44V0M870.5 44V0M880.5 44V0M890.5 44V0M900.5 44V0M910.5 44V0M920.5 44V0M930.5 44V0M940.5 44V0M950.5 44V0M960.5 44V0M970.5 44V0M980.5 44V0M990.5 44V0M1000.5 44V0M1010.5 44V0M1020.5 44V0M1030.5 44V0M1040.5 44V0M1050.5 44V0M1060.5 44V0M1070.5 44V0M1080.5 44V0M1090.5 44V0M1100.5 44V0M1110.5 44V0M1120.5 44V0M1130.5 44V0M1140.5 44V0M1150.5 44V0M1160.5 44V0M1170.5 44V0M1180.5 44V0M1190.5 44V0M1200.5 44V0M1210.5 44V0M1220.5 44V0M1230.5 44V0M1240.5 44V0M1250.5 44V0M1260.5 44V0M1270.5 44V0M1280.5 44V0M1290.5 44V0M1300.5 44V0M1310.5 44V0M1320.5 44V0M1330.5 44V0M1340.5 44V0M1350.5 44V0M1360.5 44V0M1370.5 44V0M1380.5 44V0M1390.5 44V0M1400.5 44V0M1410.5 44V0M1420.5 44V0M1430.5 44V0M1440.5 44V0M0 9.5H1440M0 19.5H1440M0 29.5H1440M0 39.5H1440"
stroke="url(#paint0_radial_278_2337)"
stroke-width="0.5"
/>
<defs>
<radialGradient
id="paint0_radial_278_2337"
cx="0"
cy="0"
r="1"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(720.25 22) scale(682.75 20.8546)"
>
<stop stop-color="currentColor" stop-opacity="0.15" />
<stop offset="1" stop-color="currentColor" stop-opacity="0" />
</radialGradient>
</defs>
</svg>
"""
end
end