diff --git a/lib/atomic_web/components/helpers.ex b/lib/atomic_web/components/helpers.ex
index beee3c9b..b5c63d5f 100644
--- a/lib/atomic_web/components/helpers.ex
+++ b/lib/atomic_web/components/helpers.ex
@@ -101,4 +101,10 @@ defmodule AtomicWeb.Components.Helpers do
|> maybe_put(:order_by, order_by)
|> maybe_put(:order_directions, order_directions)
end
+
+ def atom_to_string_capitalize(atom) when is_atom(atom) do
+ atom
+ |> Atom.to_string()
+ |> String.capitalize()
+ end
end
diff --git a/lib/atomic_web/components/sidebar.ex b/lib/atomic_web/components/sidebar.ex
index 4062d54b..1dc89f52 100644
--- a/lib/atomic_web/components/sidebar.ex
+++ b/lib/atomic_web/components/sidebar.ex
@@ -190,7 +190,7 @@ defmodule AtomicWeb.Components.Sidebar do
defp user_image(user) do
if user.profile_picture do
- Uploaders.ProfilePicture.url({user, user.profile_picture}, :original)
+ Uploaders.ProfilePicture.url({user.profile_picture, user}, :original)
else
nil
end
diff --git a/lib/atomic_web/components/socials.ex b/lib/atomic_web/components/socials.ex
new file mode 100644
index 00000000..acc3df0a
--- /dev/null
+++ b/lib/atomic_web/components/socials.ex
@@ -0,0 +1,43 @@
+defmodule AtomicWeb.Components.Socials do
+ @moduledoc false
+ use Phoenix.Component
+ alias AtomicWeb.Components.Helpers
+
+ attr :entity, :map, required: true
+
+ def socials(assigns) do
+ assigns = assign(assigns, :socials_with_values, get_social_values(assigns.entity))
+
+ ~H"""
+
+ <%= for {social, icon, url_base, social_value} <- @socials_with_values do %>
+ <%= if social_value do %>
+
+
icon} class="h-5 w-5" alt={Helpers.atom_to_string_capitalize(social)} />
+ <.link class="text-blue-500" target="_blank" href={url_base <> social_value}>
+ <%= Helpers.atom_to_string_capitalize(social) %>
+
+
+ <% end %>
+ <% end %>
+
+ """
+ end
+
+ defp get_social_values(entity) do
+ get_socials()
+ |> Enum.map(fn {social, icon, url_base} ->
+ social_value = Map.get(entity, social)
+ {social, icon, url_base, social_value}
+ end)
+ end
+
+ def get_socials do
+ [
+ {:tiktok, "tiktok.svg", "https://tiktok.com/"},
+ {:instagram, "instagram.svg", "https://instagram.com/"},
+ {:facebook, "facebook.svg", "https://facebook.com/"},
+ {:x, "x.svg", "https://x.com/"}
+ ]
+ end
+end
diff --git a/lib/atomic_web/live/partner_live/form_component.ex b/lib/atomic_web/live/partner_live/form_component.ex
index bd6ec775..f8fdfe07 100644
--- a/lib/atomic_web/live/partner_live/form_component.ex
+++ b/lib/atomic_web/live/partner_live/form_component.ex
@@ -20,11 +20,12 @@ defmodule AtomicWeb.PartnerLive.FormComponent do
<.field field={location_form[:name]} label="Address" type="text" placeholder="Address" help_text={gettext("Address of the partner")} required />
<%= gettext("Socials") %>
-
+
<.inputs_for :let={socials_form} field={f[:socials]}>
<.field field={socials_form[:instagram]} type="text" class="w-full" />
<.field field={socials_form[:facebook]} type="text" class="w-full" />
<.field field={socials_form[:x]} type="text" class="w-full" />
+ <.field field={socials_form[:tiktok]} type="text" class="w-full" />
<.field field={socials_form[:website]} type="text" class="w-full" />
diff --git a/lib/atomic_web/live/partner_live/show.ex b/lib/atomic_web/live/partner_live/show.ex
index c2718ddd..c67b4409 100644
--- a/lib/atomic_web/live/partner_live/show.ex
+++ b/lib/atomic_web/live/partner_live/show.ex
@@ -1,7 +1,7 @@
defmodule AtomicWeb.PartnerLive.Show do
use AtomicWeb, :live_view
- import AtomicWeb.Components.Avatar
+ import AtomicWeb.Components.{Avatar, Socials}
alias Atomic.Accounts
alias Atomic.Organizations
diff --git a/lib/atomic_web/live/partner_live/show.html.heex b/lib/atomic_web/live/partner_live/show.html.heex
index 0756af2d..8e6642e7 100644
--- a/lib/atomic_web/live/partner_live/show.html.heex
+++ b/lib/atomic_web/live/partner_live/show.html.heex
@@ -21,36 +21,28 @@
<%= if @partner.location do %>
+
- <.icon name="hero-map-pin" class="size-5 text-zinc-400" />
- <.link class="text-blue-500" href={"https://www.google.com/maps/search/?api=1&query=#{@partner.location.name}"}><%= @partner.location.name %>
+ <.icon name="hero-map-pin" class="h-5 w-5 text-zinc-400" />
+ <.link class="text-blue-500" href={"https://www.google.com/maps/search/?api=1&query=#{@partner.location.name}"}>
+ <%= @partner.location.name %>
+
<% end %>
+
<%= if @partner.socials do %>
-
+
+
+
<%= if @partner.socials.website do %>
-
- <.icon name="hero-globe-alt" class="size-5 text-zinc-400" />
+
+ <.icon name="hero-globe-alt" class="h-5 w-5 text-zinc-400" />
<.link class="text-blue-500" href={@partner.socials.website}>Website
<% end %>
- <%= if @partner.socials.instagram do %>
-
-
- <.link class="text-blue-500" href={"https://instagram.com/" <> @partner.socials.instagram}>Instagram
-
- <% end %>
- <%= if @partner.socials.facebook do %>
-
-
- <.link class="text-blue-500" href={"https://facebook.com/" <> @partner.socials.facebook}>Facebook
-
- <% end %>
- <%= if @partner.socials.x do %>
-
-
- <.link class="text-blue-500" href={"https://x.com/" <> @partner.socials.x}>X
-
+
+ <%= if @partner.socials do %>
+ <.socials entity={@partner.socials} />
<% end %>
<% end %>