Packages
literature
0.2.15
0.5.1
0.5.0
0.4.22
0.4.21
0.4.20
0.4.19
0.4.18
0.4.17
0.4.16
0.4.15
0.4.14
0.4.13
0.4.12
0.4.11
0.4.10
0.4.9
0.4.8
0.4.7
0.4.6
retired
0.4.5
0.4.4
0.4.3
0.4.2
0.4.1
0.4.0
0.3.6
0.3.5
0.3.4
0.3.3
0.3.2
0.3.1
0.3.0
0.2.18
0.2.17
0.2.16
0.2.15
0.2.14
0.2.13
0.2.12
0.2.11
0.2.10
0.2.9
0.2.8
0.2.7
0.2.6
0.2.5
0.2.4
0.2.3
0.2.2
0.2.1
0.2.0
0.1.32
0.1.30
0.1.29
0.1.28
0.1.27
0.1.26
0.1.25
0.1.24
0.1.23
0.1.22
0.1.21
0.1.20
0.1.19
0.1.18
0.1.17
0.1.16
0.1.15
0.1.14
0.1.13
0.1.12
0.1.11
0.1.10
0.1.9
0.1.8
0.1.7
0.1.6
0.1.5
0.1.4
0.1.3
0.1.2
0.1.1
0.1.0
A simple CMS / Blog
Current section
Files
Jump to
Current section
Files
lib/literature/components/layout_component.ex
defmodule Literature.LayoutComponent do
@moduledoc false
use Literature.Web, :html
def h1(assigns) do
~H"""
<h1 class="font-extrabold text-3xl text-primary-700 mb-5">
<%= render_slot(@inner_block) %>
</h1>
"""
end
def container(assigns) do
~H"""
<div class="mt-4 p-10 rounded-lg bg-white shadow-md">
<%= render_slot(@inner_block) %>
</div>
"""
end
def delete_modal(assigns) do
assigns = assign_new(assigns, :on_close, fn -> "close_delete_modal" end)
~H"""
<.modal id="delete-modal" on_close={@on_close}>
<div class="text-center">
<svg
aria-hidden="true"
class="mx-auto mb-4 w-14 h-14 text-gray-400"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
>
</path>
</svg>
<h3 class="text-lg font-normal text-gray-500">
Are you sure you want to delete <span class="font-medium text-red-500"><%= @label %></span>?
</h3>
</div>
<:footer>
<div class="text-center">
<%= link("Yes, I'm sure",
to: "#",
phx_click: "delete",
phx_value_id: @item.id,
class:
"text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center mr-2"
) %>
<%= link("No, cancel",
to: "#",
phx_click: @on_close,
class:
"text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-gray-200 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10"
) %>
</div>
</:footer>
</.modal>
"""
end
def modal(assigns) do
~H"""
<div
id={@id}
tabindex="-1"
class="overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 md:inset-0 h-modal md:h-full flex justify-center items-center bg-black bg-opacity-50"
aria-hidden="true"
>
<div class="relative p-4 w-full max-w-md h-full md:h-auto">
<div class="relative bg-white rounded-lg shadow">
<%= link to: "#", phx_click: @on_close, class: "absolute top-3 right-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center" do %>
<svg
aria-hidden="true"
class="w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd"
>
</path>
</svg>
<span class="sr-only">Close modal</span>
<% end %>
<div class="p-6">
<div>
<%= render_slot(@inner_block) %>
</div>
<div class="mt-5">
<%= render_slot(@footer, %{on_close: @on_close}) %>
</div>
</div>
</div>
</div>
</div>
"""
end
def success_alert(assigns) do
~H"""
<%= if live_flash(@flash, :success) do %>
<div class="flex p-4 mb-4 bg-primary-100 rounded-lg" role="alert">
<svg
aria-hidden="true"
class="flex-shrink-0 w-5 h-5 text-primary-700"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
clip-rule="evenodd"
>
</path>
</svg>
<span class="sr-only">Success</span>
<div class="ml-3 text-sm font-medium text-primary-700">
<%= live_flash(@flash, :success) %>
</div>
<button
type="button"
phx-click="lv:clear-flash"
phx-value-key="success"
class="ml-auto -mx-1.5 -my-1.5 bg-primary-100 text-primary-500 rounded-lg focus:ring-2 focus:ring-primary-400 p-1.5 hover:bg-primary-200 inline-flex h-8 w-8"
aria-label="Close"
>
<span class="sr-only">Close</span>
<svg
aria-hidden="true"
class="w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd"
>
</path>
</svg>
</button>
</div>
<% end %>
"""
end
def error_alert(assigns) do
~H"""
<%= if live_flash(@flash, :error) do %>
<div class="flex p-4 mb-4 bg-red-100 rounded-lg" role="alert">
<svg
aria-hidden="true"
class="flex-shrink-0 w-5 h-5 text-red-700"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
clip-rule="evenodd"
>
</path>
</svg>
<span class="sr-only">Success</span>
<div class="ml-3 text-sm font-medium text-red-700">
<%= live_flash(@flash, :error) %>
</div>
<button
type="button"
phx-click="lv:clear-flash"
phx-value-key="error"
class="ml-auto -mx-1.5 -my-1.5 bg-red-100 text-red-500 rounded-lg focus:ring-2 focus:ring-red-400 p-1.5 hover:bg-red-200 inline-flex h-8 w-8"
aria-label="Close"
>
<span class="sr-only">Close</span>
<svg
aria-hidden="true"
class="w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd"
>
</path>
</svg>
</button>
</div>
<% end %>
"""
end
def loading_page(assigns) do
~H"""
<div class="px-3 py-4 space-x-3 animate-pulse">
<div class="bg-slate-200 h-12 w-40 rounded-lg inline-block"></div>
<div class="bg-slate-200 h-12 w-40 rounded-lg inline-block"></div>
<div class="bg-slate-200 h-12 w-40 rounded-lg inline-block"></div>
</div>
<div class="col-span-4 bg-white shadow-md rounded-lg p-10">
<div class="animate-pulse">
<div class="bg-slate-200 h-8 w-40 rounded-lg mb-5"></div>
<div class="w-1/2">
<div class="bg-slate-200 h-10 w-full rounded-lg"></div>
<div class="flex items-center my-5 space-x-5">
<div class="bg-slate-200 h-2 w-full rounded-lg"></div>
<div class="bg-slate-200 h-2 w-full rounded-lg"></div>
<div class="bg-slate-200 h-2 w-full rounded-lg"></div>
</div>
</div>
<div class="grid grid-cols-3 gap-5">
<div class="col-span-3 bg-slate-200 h-10 w-full rounded-lg"></div>
<div class="bg-slate-200 h-3 w-full rounded-lg"></div>
<div class="col-span-3 bg-slate-200 h-3 w-full rounded-lg"></div>
<div class="bg-slate-200 h-3 w-full rounded-lg"></div>
<div class="bg-slate-200 h-3 w-full rounded-lg"></div>
<div class="col-span-3 bg-slate-200 h-3 w-full rounded-lg"></div>
<div class="bg-slate-200 h-3 w-full rounded-lg"></div>
<div class="bg-slate-200 h-3 w-full rounded-lg"></div>
<div class="bg-slate-200 h-3 w-full rounded-lg"></div>
<div class="col-span-3 bg-slate-200 h-3 w-full rounded-lg"></div>
<div class="bg-slate-200 h-3 w-full rounded-lg"></div>
<div class="bg-slate-200 h-3 w-full rounded-lg"></div>
<div class="col-span-3 bg-slate-200 h-3 w-full rounded-lg"></div>
<div class="bg-slate-200 h-3 w-full rounded-lg"></div>
<div class="col-span-3 bg-slate-200 h-2 w-full rounded-lg"></div>
</div>
</div>
</div>
"""
end
end