solop

solop

I want to render an icon based on some kind of params:

  defp render_status_icon(case, classes) do
    icon_name = case case.status do
      :open -> "hero-inbox-solid text-emerald-500"
      :closed -> "hero-lock-closed text-gray-500"
      :archived -> "hero-archive-box text-gray-500"
      _ -> "hero-question-mark-circle text-blue-500"
    end

    content_tag(:span, class: "#{icon_name} #{classes}") do

    end
  end

I call it like this in my .heex file:

<%= render_status_icon(case, "h-4 w-4") %>

It works fine, but content_tag is deprecated.

What would be the correct pattern using core_components? It seems i cannot simply call those functions?
Or do I need to create a new Phoenix.Component just to render this?
Or should I use a sigil and simply render <span> myself?

Showing Posts 1 to 4

Hermanverschooten

Hermanverschooten

I would do something like this:

attr :status, :atom, required: true
attr :classes, :string, default: ""
defp status_icon(%{status: status} = assigns) do
  icon_name = case status do
    :open -> "hero-inbox-solid text-emerald-500"
    :closed -> "hero-lock-closed text-gray-500"
    :archived -> "hero-archive-box text-gray-500"
    _ -> "hero-question-mark-circle text-blue-500"
  end
  ~H"<span class={[icon_name, @classes]} />"
end

And then use it as:
<.status_icon status={case.status} classes="h-4 w-4" />

Hermanverschooten

Hermanverschooten

Or maybe even simpler, just make the function that returns the icon to use and use that immediately.

<span class={[status_icon(case.status), "w-4 h-4"]} />

solop

solop OP

Thanks, that is helpful :slight_smile:

solop

solop OP

As a note for anyone else, this actually will throw a warning of using a local variable (icon_name) in the template. Instead one should put this into the assigns as well:

  attr :status, :atom, required: true
  attr :class, :string, default: ""
  def status_icon(%{status: status} = assigns) do
    icon_name = case status do
      :open -> "hero-inbox-solid text-emerald-500"
      :closed -> "hero-lock-closed text-gray-500"
      :archived -> "hero-archive-box text-gray-500"
      _ -> "hero-question-mark-circle text-blue-500"
    end
    assigns = assign(assigns, :icon_name, icon_name)
    ~H"<span class={[@icon_name, @class]} />"
  end
— All posts loaded —

Where Next? Top

Trending in Questions Top

RSP87
I’m working on a project that simulates the bumbl example in the programming phoenix book. It acts almost like an email client. We have a...
New
kszambelanczyk
Hello! Could someone please give me a help/sample code, how to delete a file from s3 using waffle/waffle_ecto from Phoenix app. I creat...
New
RemyXRenard
I’m seeing that a list inside a Kino.DataTable will be interpreted as a charlist, even if the Kino.configure() is set to charlists: :as_l...
New
velrest
So my question is quite simple and i have found no conclusive answer on forum, google or AI. Should we use :erlang.float for Integer to ...
New
samoloth
Hi, I’ve just set up an application with ash_authentication. There is only magic link strategy for now, so there is no confirmation add o...
New
FlyingNoodle
If a change or preparation module uses Ash.Changeset.get_argument/2 or Ash.Query.get_argument/2 (or any of the other get_argument functio...
New
psy-q
I’m trying to set up Emacs with elixir-ls via lsp-mode and credo via Flycheck. This should mostly be preconfigured as Flycheck picks up c...
New

Other Trending Topics Top

mudasobwa
I am happy to introduce the very α version of the new programming language compiled to BEAM. Welcome Cure. It has literally three kille...
New
garrison
Hobbes is a low-level distributed database for the Elixir programming language. Hobbes provides a simple, safe, and scalable storage lay...
New
marciok
Hi there! We created Gust: A task orchestrator inspired by Airflow. For those who have never heard about Aiflow, it’s a Python-based wor...
New
jimsynz
Beam Bots (or just BB for short) is a framework for building fault-tolerant robotics applications in Elixir using familiar OTP patterns. ...
New
Dmk
Xamal is a deployment tool for Elixir apps that deploys native releases to bare metal servers over SSH. It’s a port of GitHub - basecamp/...
New
Damirados
Hello everyone. After busy few months I am happy to announce v0.1.0 of Emerge &amp; Solve. They are GUI (Emerge) and State management (S...
New

We're in Beta

About us Mission Statement

Options

Thread Display Mode




Thread Preview

Skip Thread Previews