pinchflat/lib/pinchflat_web/components/custom_components/text_components.ex
Kieran 53e106dac2
[Enhancement] Add sorting, pagination, and new attributes to sources index table (#510)
* WIP - started improving handling of sorting for sources index table

* WIP - Added UI to table to indicate sort column and direction

* Refactored toggle liveview into a livecomponent

* Added sorting for all table attrs

* Added pagination to the sources table

* Added tests for updated liveviews and live components

* Add tests for new helper methods

* Added fancy new CSS to my sources table

* Added size to sources table

* Adds relative div to ensure that sorting arrow doesn't run away

* Fixed da tests
2024-12-13 09:49:00 -08:00

149 lines
3.7 KiB
Elixir

defmodule PinchflatWeb.CustomComponents.TextComponents do
@moduledoc false
use Phoenix.Component
alias Pinchflat.Utils.NumberUtils
alias PinchflatWeb.CoreComponents
@doc """
Renders a code block with the given content.
"""
slot :inner_block
def inline_code(assigns) do
~H"""
<code class="inline-block text-sm font-mono text-gray bg-boxdark rounded-md p-0.5 mx-0.5 text-nowrap">
{render_slot(@inner_block)}
</code>
"""
end
@doc """
Renders a reference link with the given href and content.
"""
attr :href, :string, required: true
slot :inner_block
def inline_link(assigns) do
~H"""
<.link href={@href} target="_blank" class="text-blue-500 hover:text-blue-300">
{render_slot(@inner_block)}
</.link>
"""
end
@doc """
Renders a subtle link with the given href and content.
"""
attr :href, :string, required: true
attr :target, :string, default: "_self"
slot :inner_block
def subtle_link(assigns) do
~H"""
<.link href={@href} target={@target} class="underline decoration-bodydark decoration-1 hover:decoration-white">
{render_slot(@inner_block)}
</.link>
"""
end
@doc """
Renders an icon as a link with the given href.
"""
attr :href, :string, required: true
attr :icon, :string, required: true
attr :class, :string, default: ""
def icon_link(assigns) do
~H"""
<.link href={@href} class={["hover:text-secondary duration-200 ease-in-out", @class]}>
<CoreComponents.icon name={@icon} />
</.link>
"""
end
@doc """
Renders a block of text with each line broken into a separate span and links highlighted.
"""
attr :text, :string, required: true
def render_description(assigns) do
formatted_text =
Regex.split(~r{https?://\S+}, assigns.text, include_captures: true)
|> Enum.map(fn
"http" <> _ = url ->
Phoenix.HTML.Tag.content_tag(:a, url, class: "text-blue-500 hover:text-blue-300", href: url, target: "_blank")
text ->
text
|> String.split("\n", trim: false)
|> Enum.intersperse(Phoenix.HTML.Tag.tag(:span, class: "inline-block mt-2"))
end)
assigns = Map.put(assigns, :text, formatted_text)
~H"""
<span>{@text}</span>
"""
end
@doc """
Renders a UTC datetime in the specified format and timezone
"""
attr :datetime, :any, required: true
attr :format, :string, default: "%Y-%m-%d %H:%M:%S"
attr :timezone, :string, default: nil
def datetime_in_zone(assigns) do
timezone = assigns.timezone || Application.get_env(:pinchflat, :timezone)
assigns = Map.put(assigns, :timezone, timezone)
~H"""
<time>{Calendar.strftime(Timex.Timezone.convert(@datetime, @timezone), @format)}</time>
"""
end
@doc """
Renders a localized number using the Intl.NumberFormat API, falling back to the raw number if needed
"""
attr :number, :any, required: true
def localized_number(assigns) do
~H"""
<span x-data x-text={"Intl.NumberFormat().format(#{@number})"}>{@number}</span>
"""
end
@doc """
Renders a word with a suffix if the count is not 1
"""
attr :word, :string, required: true
attr :count, :integer, required: true
attr :suffix, :string, default: "s"
def pluralize(assigns) do
~H"""
{@word}{if @count == 1, do: "", else: @suffix}
"""
end
@doc """
Renders a human-readable byte size
"""
attr :byte_size, :integer, required: true
def readable_filesize(assigns) do
{num, suffix} = NumberUtils.human_byte_size(assigns.byte_size, precision: 2)
assigns =
Map.merge(assigns, %{
num: num,
suffix: suffix
})
~H"""
<.localized_number number={@num} /> {@suffix}
"""
end
end