2023-03-31 17:00:09 +02:00
|
|
|
|
defmodule ChiyaWeb.PublicComponents do
|
|
|
|
|
use Phoenix.Component
|
|
|
|
|
|
|
|
|
|
use Phoenix.VerifiedRoutes,
|
|
|
|
|
endpoint: ChiyaWeb.Endpoint,
|
|
|
|
|
router: ChiyaWeb.Router,
|
|
|
|
|
statics: ChiyaWeb.static_paths()
|
|
|
|
|
|
2023-06-19 21:49:01 +02:00
|
|
|
|
@doc """
|
|
|
|
|
Renders a [Hero Icon](https://heroicons.com).
|
|
|
|
|
|
|
|
|
|
Hero icons come in three styles – outline, solid, and mini.
|
|
|
|
|
By default, the outline style is used, but solid an mini may
|
|
|
|
|
be applied by using the `-solid` and `-mini` suffix.
|
|
|
|
|
|
|
|
|
|
You can customize the size and colors of the icons by setting
|
|
|
|
|
width, height, and background color classes.
|
|
|
|
|
|
|
|
|
|
Icons are extracted from your `priv/hero_icons` directory and bundled
|
|
|
|
|
within your compiled app.css by the plugin in your `assets/tailwind.config.js`.
|
|
|
|
|
|
|
|
|
|
## Examples
|
|
|
|
|
|
|
|
|
|
<.icon name="hero-cake" />
|
|
|
|
|
<.icon name="hero-cake-solid" />
|
|
|
|
|
<.icon name="hero-cake-mini" />
|
|
|
|
|
<.icon name="hero-bolt" class="bg-blue-500 w-10 h-10" />
|
|
|
|
|
"""
|
|
|
|
|
attr :name, :string, required: true
|
|
|
|
|
attr :class, :string, default: nil
|
|
|
|
|
|
|
|
|
|
def icon(%{name: "hero-" <> _} = assigns) do
|
|
|
|
|
~H"""
|
|
|
|
|
<span class={[@name, @class]} />
|
|
|
|
|
"""
|
|
|
|
|
end
|
2023-05-07 10:30:32 +02:00
|
|
|
|
|
2023-03-31 17:00:09 +02:00
|
|
|
|
@doc """
|
|
|
|
|
Renders a horizontal line
|
|
|
|
|
"""
|
2023-05-25 21:23:04 +02:00
|
|
|
|
def line(assigns),
|
|
|
|
|
do: ~H"""
|
2023-04-13 23:52:01 +02:00
|
|
|
|
<hr class="my-6 border-theme-base/20" />
|
|
|
|
|
"""
|
2023-07-07 13:02:31 +02:00
|
|
|
|
|
2023-04-13 23:52:01 +02:00
|
|
|
|
@doc """
|
2023-05-21 22:45:06 +02:00
|
|
|
|
Renders a note-header with title.
|
2023-04-13 23:52:01 +02:00
|
|
|
|
"""
|
|
|
|
|
attr :class, :string, default: nil
|
2023-07-06 21:28:56 +02:00
|
|
|
|
attr :class_title, :string, default: nil
|
|
|
|
|
attr :class_subtitle, :string, default: nil
|
2023-04-13 23:52:01 +02:00
|
|
|
|
|
2023-07-06 21:28:56 +02:00
|
|
|
|
slot :subtitle, required: false
|
2023-04-13 23:52:01 +02:00
|
|
|
|
|
|
|
|
|
def header(assigns) do
|
|
|
|
|
~H"""
|
2023-08-23 16:15:36 +02:00
|
|
|
|
<header class={[@class]}>
|
2023-08-23 16:15:50 +02:00
|
|
|
|
<h1 class={["text-3xl leading-10 font-bold text-theme-base1", @class_title]}>
|
2023-07-09 20:01:03 +02:00
|
|
|
|
<%= render_slot(@inner_block) %>
|
2023-07-05 16:40:11 +02:00
|
|
|
|
</h1>
|
2023-09-09 16:08:30 +02:00
|
|
|
|
<p :if={@subtitle != []} class={["mt-4 leading-7 text-theme-base", @class_subtitle]}>
|
2023-07-05 16:40:11 +02:00
|
|
|
|
<%= render_slot(@subtitle) %>
|
|
|
|
|
</p>
|
2023-04-13 23:52:01 +02:00
|
|
|
|
</header>
|
2023-03-31 17:00:09 +02:00
|
|
|
|
"""
|
|
|
|
|
end
|
2023-09-09 16:08:30 +02:00
|
|
|
|
|
2023-07-25 07:05:08 +02:00
|
|
|
|
attr :note, :map, required: true
|
|
|
|
|
|
2023-06-27 22:04:44 +02:00
|
|
|
|
def featured_images(assigns) do
|
|
|
|
|
images = main_images(assigns.note)
|
2023-05-07 10:30:32 +02:00
|
|
|
|
|
2023-06-27 22:04:44 +02:00
|
|
|
|
case Enum.count(images) do
|
|
|
|
|
0 ->
|
|
|
|
|
~H"""
|
|
|
|
|
<figure />
|
2023-05-07 10:30:32 +02:00
|
|
|
|
"""
|
|
|
|
|
|
2023-06-27 22:04:44 +02:00
|
|
|
|
1 ->
|
|
|
|
|
assigns = assign(assigns, :image, List.first(images))
|
|
|
|
|
|
2023-05-07 10:30:32 +02:00
|
|
|
|
~H"""
|
2023-08-23 14:04:36 +02:00
|
|
|
|
<figure class="images-1">
|
2023-07-25 06:55:04 +02:00
|
|
|
|
<.featured_image image={assigns.image} size={:full} class="rounded-lg" />
|
2023-06-27 22:04:44 +02:00
|
|
|
|
</figure>
|
2023-05-21 09:54:38 +02:00
|
|
|
|
"""
|
|
|
|
|
|
2023-06-27 22:04:44 +02:00
|
|
|
|
2 ->
|
|
|
|
|
assigns =
|
|
|
|
|
assigns
|
|
|
|
|
|> assign(:first, Enum.at(images, 0))
|
|
|
|
|
|> assign(:second, Enum.at(images, 1))
|
|
|
|
|
|
2023-05-21 09:54:38 +02:00
|
|
|
|
~H"""
|
2023-08-23 14:04:36 +02:00
|
|
|
|
<figure class="images-2 | flex gap-1">
|
2023-08-23 15:05:03 +02:00
|
|
|
|
<.featured_image image={assigns.first} size={:full} class="rounded-l flex-1 w-full" />
|
|
|
|
|
<.featured_image image={assigns.second} size={:full} class="rounded-r flex-1 w-full" />
|
2023-06-27 22:04:44 +02:00
|
|
|
|
</figure>
|
2023-05-07 10:30:32 +02:00
|
|
|
|
"""
|
2023-06-27 22:04:44 +02:00
|
|
|
|
|
2023-07-05 06:49:37 +02:00
|
|
|
|
3 ->
|
|
|
|
|
assigns =
|
|
|
|
|
assigns
|
|
|
|
|
|> assign(:first, Enum.at(images, 0))
|
|
|
|
|
|> assign(:second, Enum.at(images, 1))
|
|
|
|
|
|> assign(:third, Enum.at(images, 2))
|
|
|
|
|
|
|
|
|
|
~H"""
|
2023-08-23 14:04:36 +02:00
|
|
|
|
<figure class="images-3 | flex gap-1">
|
2023-07-25 06:55:04 +02:00
|
|
|
|
<.featured_image image={assigns.first} size={:thumb} class="flex-1 w-full rounded-l" />
|
|
|
|
|
<.featured_image image={assigns.second} size={:thumb} class="flex-1 w-full" />
|
|
|
|
|
<.featured_image image={assigns.third} size={:thumb} class="flex-1 w-full rounded-r" />
|
|
|
|
|
</figure>
|
|
|
|
|
"""
|
|
|
|
|
|
|
|
|
|
_ ->
|
|
|
|
|
assigns =
|
|
|
|
|
assigns
|
|
|
|
|
|> assign(:first, Enum.at(images, 0))
|
|
|
|
|
|> assign(:second, Enum.at(images, 1))
|
|
|
|
|
|> assign(:third, Enum.at(images, 2))
|
|
|
|
|
|> assign(:fourth, Enum.at(images, 3))
|
|
|
|
|
|
|
|
|
|
~H"""
|
2023-08-23 14:04:36 +02:00
|
|
|
|
<figure class="images-4 | flex gap-1 flex-col">
|
2023-07-25 06:55:04 +02:00
|
|
|
|
<section class="flex gap-1">
|
2023-07-25 07:05:08 +02:00
|
|
|
|
<.featured_image image={assigns.first} size={:thumb} class="flex-1 w-full rounded-tl-lg" />
|
|
|
|
|
<.featured_image image={assigns.second} size={:thumb} class="flex-1 w-full rounded-tr-lg" />
|
|
|
|
|
</section>
|
|
|
|
|
<section class="flex gap-1">
|
|
|
|
|
<.featured_image image={assigns.third} size={:thumb} class="flex-1 w-full rounded-bl-lg" />
|
|
|
|
|
<.featured_image image={assigns.fourth} size={:thumb} class="flex-1 w-full rounded-br-lg" />
|
|
|
|
|
</section>
|
2023-07-05 06:49:37 +02:00
|
|
|
|
</figure>
|
|
|
|
|
"""
|
2023-05-07 10:30:32 +02:00
|
|
|
|
end
|
|
|
|
|
end
|
|
|
|
|
|
2023-07-25 06:55:04 +02:00
|
|
|
|
attr :image, :map, required: true
|
|
|
|
|
attr :class, :string
|
|
|
|
|
attr :size, :atom, default: :thumb
|
|
|
|
|
|
|
|
|
|
defp featured_image(assigns) do
|
|
|
|
|
~H"""
|
|
|
|
|
<img
|
|
|
|
|
src={ChiyaWeb.Helpers.image_url(assigns.image, assigns.size)}
|
|
|
|
|
class={assigns.class}
|
|
|
|
|
title={assigns.image.content}
|
2023-09-11 15:07:30 +02:00
|
|
|
|
loading="lazy"
|
2023-07-25 06:55:04 +02:00
|
|
|
|
/>
|
|
|
|
|
"""
|
|
|
|
|
end
|
|
|
|
|
|
2023-06-27 22:04:44 +02:00
|
|
|
|
defp main_images(note),
|
|
|
|
|
do: Enum.filter(note.images, fn image -> image.featured end)
|
2023-03-31 17:00:09 +02:00
|
|
|
|
end
|