42 lines
1.3 KiB
Elixir
42 lines
1.3 KiB
Elixir
|
defmodule SimpleshopThemeWeb.ShopComponents do
|
||
|
|
@moduledoc """
|
||
|
|
Provides shop/storefront UI components.
|
||
|
|
|
||
|
|
These components are shared between the theme preview system and
|
||
|
|
the public storefront pages. They render using CSS custom properties
|
||
|
|
defined by the theme settings.
|
||
|
|
"""
|
||
|
|
use Phoenix.Component
|
||
|
|
|
||
|
|
@doc """
|
||
|
|
Renders the announcement bar.
|
||
|
|
|
||
|
|
The bar displays promotional messaging at the top of the page.
|
||
|
|
It uses CSS custom properties for theming.
|
||
|
|
|
||
|
|
## Attributes
|
||
|
|
|
||
|
|
* `theme_settings` - Required. The theme settings map.
|
||
|
|
* `message` - Optional. The announcement message to display.
|
||
|
|
Defaults to "Free delivery on orders over £40".
|
||
|
|
|
||
|
|
## Examples
|
||
|
|
|
||
|
|
<.announcement_bar theme_settings={@theme_settings} />
|
||
|
|
<.announcement_bar theme_settings={@theme_settings} message="20% off this weekend!" />
|
||
|
|
"""
|
||
|
|
attr :theme_settings, :map, required: true
|
||
|
|
attr :message, :string, default: "Free delivery on orders over £40"
|
||
|
|
|
||
|
|
def announcement_bar(assigns) do
|
||
|
|
~H"""
|
||
|
|
<div
|
||
|
|
class="announcement-bar"
|
||
|
|
style="background-color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l)); color: var(--t-text-inverse); text-align: center; padding: 0.5rem 1rem; font-size: var(--t-text-small);"
|
||
|
|
>
|
||
|
|
<p style="margin: 0;">{@message}</p>
|
||
|
|
</div>
|
||
|
|
"""
|
||
|
|
end
|
||
|
|
end
|