feat: socials component

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

lib/atomic_web/components/socials.ex

@@ -0,0 +1,34 @@
+defmodule AtomicWeb.Components.Socials do
+  @moduledoc false
+  use Phoenix.Component
+
+  attr :socials, :map, required: true
+  attr :entity, :map, required: true
+
+  def socials(assigns) do
+    ~H"""
+    <div class="mt-4 flex gap-4">
+      <%= for {social, icon, url_base} <- get_socials() do %>
+        <% social_value = Map.get(@entity, social) %>
+        <%= if social_value do %>
+          <div class="flex flex-row items-center gap-x-1">
+            <img src={"/images/" <> icon} class="h-5 w-5" alt={social |> Atom.to_string() |> String.capitalize()} />
+            <.link class="text-blue-500" target="_blank" href={url_base <> social_value}>
+              <%= social |> Atom.to_string() |> String.capitalize() %>
+            </.link>
+          </div>
+        <% end %>
+      <% end %>
+    </div>
+    """
+  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

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 />
             </.inputs_for>
             <h2 class="mt-8 mb-2 w-full border-b pb-2 text-lg font-semibold text-gray-900"><%= gettext("Socials") %></h2>
-            <div class="grid w-full gap-x-4 sm:grid-cols-1 md:grid-cols-4 lg:grid-cols-4">
+            <div class="grid w-full gap-x-4 sm:grid-cols-1 md:grid-cols-5 lg:grid-cols-5">
               <.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" />
               </.inputs_for>
             </div>

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

lib/atomic_web/live/partner_live/show.html.heex

@@ -21,36 +21,28 @@
             </h1>
           </div>
           <%= if @partner.location do %>
+            <!-- Location -->
             <div class="flex flex-row items-center gap-x-1 text-md leading-6">
-              <.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 %></.link>
+              <.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 %>
+              </.link>
             </div>
           <% end %>
+
           <%= if @partner.socials do %>
-            <div class="grid grid-cols-2 grid-rows-3 lg:flex lg:flex-row lg:gap-x-4">
+            <!-- Socials and Website -->
+            <div class="flex flex-wrap gap-x-4 items-center mt-2">
+              <!-- Website -->
               <%= if @partner.socials.website do %>
-                <div class="flex flex-row items-center gap-x-1 ">
-                  <.icon name="hero-globe-alt" class="size-5 text-zinc-400" />
+                <div class="flex flex-row items-center gap-x-1">
+                  <.icon name="hero-globe-alt" class="h-5 w-5 text-zinc-400" />
                   <.link class="text-blue-500" href={@partner.socials.website}>Website</.link>
                 </div>
               <% end %>
-              <%= if @partner.socials.instagram do %>
-                <div class="flex flex-row items-center gap-x-1 gap-y-0 sm:gap-y-2">
-                  <img src="/images/instagram.svg" class="size-5" alt="Instagram" />
-                  <.link class="text-blue-500" href={"https://instagram.com/" <> @partner.socials.instagram}>Instagram</.link>
-                </div>
-              <% end %>
-              <%= if @partner.socials.facebook do %>
-                <div class="flex flex-row items-center gap-x-1 gap-y-0 sm:gap-y-2">
-                  <img src="/images/facebook.svg" class="size-5" alt="Facebook" />
-                  <.link class="text-blue-500" href={"https://facebook.com/" <> @partner.socials.facebook}>Facebook</.link>
-                </div>
-              <% end %>
-              <%= if @partner.socials.x do %>
-                <div class="flex flex-row items-center gap-x-1 gap-y-0 sm:gap-y-2">
-                  <img src="/images/x.svg" class="size-5" alt="X" />
-                  <.link class="text-blue-500" href={"https://x.com/" <> @partner.socials.x}>X</.link>
-                </div>
+              <!-- Socials -->
+              <%= if @partner.socials do %>
+                <.socials entity={@partner.socials} />
               <% end %>
             </div>
           <% end %>