feat: add profile pictures

lib/swipex_web/live/chat_live.ex

@@ -3,8 +3,6 @@ defmodule SwipexWeb.ChatLive do
   alias Phoenix.PubSub
 
   def mount(%{"id" => id}, %{"user_id" => user_id}, socket) do
-    IO.inspect({id, user_id})
-
     with true <- Swipex.User.has_matched(id, user_id),
          {:ok, user} <- Swipex.User.get_user_by_id(id) do
       PubSub.subscribe(Swipex.PubSub, "swipex")
@@ -55,7 +53,13 @@ defmodule SwipexWeb.ChatLive do
 
     ~H"""
     <a href="/profile" class="text-blue-500">Back to profile</a>
+    <img
+      src={"https://api.dicebear.com/9.x/lorelei/svg?seed=#{@recipient["id"]}"}
+      alt="Profile picture"
+      class="rounded-full w-24 h-24"
+    />
     <h1 class="text-4xl mb-2">Chat with <%= @recipient["name"] %></h1>
+
     <hr />
     <div class="flex flex-col mt-4">
       <%= for message <- @messages do %>

lib/swipex_web/live/profile_live.ex

@@ -60,6 +60,11 @@ defmodule SwipexWeb.ProfileLive do
     ~H"""
     <div class="flex gap-4 justify-between w-full mb-3">
       <div class="flex flex-col gap-3">
+        <img
+          src={"https://api.dicebear.com/9.x/lorelei/svg?seed=#{@user["id"]}"}
+          alt="Profile picture"
+          class="rounded-full"
+        />
         <h1 class="text-4xl"><%= @user["name"] %></h1>
         <p>Hey there, <%= @user["name"] %>, this is your profile page.</p>
         <hr />
@@ -68,6 +73,11 @@ defmodule SwipexWeb.ProfileLive do
         <div class="flex flex-col gap-3">
           <p class="text-2xl">Let's swipe!</p>
           <div class="flex flex-col gap-3">
+            <img
+              src={"https://api.dicebear.com/9.x/lorelei/svg?seed=#{@potential_match["id"]}"}
+              alt="Profile picture"
+              class="rounded-full"
+            />
             <p><%= @potential_match["name"] %></p>
             <div class="flex gap-3">
               <button
@@ -101,6 +111,11 @@ defmodule SwipexWeb.ProfileLive do
         <% end %>
         <%= for match <- @matches do %>
           <div class="flex flex-col gap-3">
+            <img
+              src={"https://api.dicebear.com/9.x/lorelei/svg?seed=#{match["id"]}"}
+              alt="Profile picture"
+              class="rounded-full"
+            />
             <a href={"/chat/#{match["id"]}"} class="text-blue-400 hover:underline">
               <%= match["name"] %>
             </a>