Packages

An Elixir UI components library to make engineers' life easier.

Current section

Files

Jump to
paleta lib components card.ex
Raw

lib/components/card.ex

defmodule Paleta.Components.Card do
use Phoenix.Component
alias Paleta.Utils.StringHelper
alias Paleta.Utils.DateHelper
attr(:color, :atom, default: :default, values: [:default, :success, :warning, :error])
attr(:title, :string, default: nil)
attr(:description, :string, default: nil)
attr(:class, :string, default: "")
attr(:id, :string, default: nil)
attr(:title_class, :string, default: "text-lg font-medium tracking-wide line-clamp-1")
slot(:inner_block, required: false)
def card(%{color: color, class: class, title_class: title_class} = assigns) do
assigns =
assigns
|> assign(:class, "#{class(color)} #{class}")
|> assign(:title_class, "#{title_class} #{title_class(color)}")
~H"""
<div class={@class} id={@id}>
<div :if={@title} class="my-3 flex h-8 items-center justify-between">
<h2 class={@title_class}>
<%= @title %>
</h2>
</div>
<div class="pt-2">
<p :if={@description}>
<%= @description %>
</p>
<%= render_slot(@inner_block) %>
</div>
</div>
"""
end
defp title_class(:default), do: "text-slate-700 dark:text-navy-100"
defp title_class(_), do: "text-white"
attr(:title, :string, required: true)
attr(:description, :string, default: "")
slot(:inner_block, required: true)
def card_fields_group(assigns) do
~H"""
<div class="rounded-lg bg-info/10 px-4 pb-5 dark:bg-navy-800 sm:px-5">
<div class="space-y-4 py-3">
<div>
<h3 class="text-lg font-medium text-slate-700 dark:text-navy-100">
<%= @title %>
</h3>
<p class="text-xs text-slate-400 dark:text-navy-300">
<%= @description %>
</p>
</div>
<div class="space-y-3 text-xs+">
<%= render_slot(@inner_block) %>
</div>
</div>
</div>
"""
end
attr(:label, :string, required: true)
attr(:value, :string, default: nil)
slot(:inner_block, required: false)
def card_field(assigns) do
~H"""
<div class="flex justify-between">
<p class="line-clamp-1 text-slate-700 dark:text-navy-100">
<%= @label %>
</p>
<p class="text-right"><%= @value || render_slot(@inner_block) %></p>
</div>
"""
end
attr(:value, :string, default: nil)
slot(:inner_block, required: false)
def card_paragraph(assigns) do
~H"""
<div class="flex justify-start">
<%= @value || render_slot(@inner_block) %>
</div>
"""
end
attr(:label, :string, required: true)
attr(:icon_class, :string, required: true)
attr(:tooltip, :string, default: "")
def card_icon_field(assigns) do
~H"""
<div class="flex justify-between">
<p class="line-clamp-1 text-slate-700 dark:text-navy-100" x-tooltip.light={"'#{@tooltip}'"}>
<%= @label %>
</p>
<p class="text-right">
<i class={@icon_class} />
</p>
</div>
"""
end
def card_line(assigns) do
~H"""
<div class="my-3 h-px bg-slate-200 dark:bg-navy-500"></div>
"""
end
attr(:label, :string, required: true)
attr(:value, :string, required: true)
attr(:format, :string, required: true, values: ["date_from_now", "short_id"])
def card_formatted_field(%{format: "date_from_now", value: value} = assigns) do
assigns
|> assign(:value, DateHelper.from_now(value))
|> _card_formatted_field()
end
def card_formatted_field(%{format: "short_id", value: value} = assigns) do
assigns
|> assign(:value, StringHelper.short_id(value))
|> _card_formatted_field()
end
defp _card_formatted_field(assigns) do
~H"""
<div class="flex justify-between">
<p class="font-medium text-slate-700 dark:text-navy-100">
<%= @label %>
</p>
<p class="text-right"><%= @value %></p>
</div>
"""
end
defp class(:default), do: "card px-4 py-4 sm:px-5"
defp class(:warning), do: "rounded-lg bg-warning px-4 py-4 text-white sm:px-5"
defp class(:success), do: "rounded-lg bg-success px-4 py-4 text-white sm:px-5"
defp class(:error), do: "rounded-lg bg-error px-4 py-4 text-white sm:px-5"
end