feat: avatar component (#439)

Author: MarioRodrigues10

assets/css/components.css

@@ -1 +1,2 @@
+@import "components/avatar.css";
 @import "components/field.css";

assets/css/components/avatar.css

@@ -0,0 +1,27 @@
+/* Avatar */
+
+.safira-avatar {
+  @apply font-medium leading-none flex shrink-0 items-center justify-center select-none;
+}
+
+/* Avatar - sizes */
+
+.safira-avatar--xs {
+  @apply h-8 w-8 text-xs;
+}
+
+.safira-avatar--sm {
+  @apply h-12 w-12 text-lg;
+}
+
+.safira-avatar--md {
+  @apply h-16 w-16 text-lg;
+}
+
+.safira-avatar--lg {
+  @apply h-20 w-20 text-4xl;
+}
+
+.safira-avatar--xl {
+  @apply h-24 w-24 text-4xl;
+}

lib/safira_web.ex

@@ -63,6 +63,7 @@ defmodule SafiraWeb do
       use Phoenix.LiveView,
         layout: {SafiraWeb.Layouts, :app}
 
+      import SafiraWeb.Components.Avatar
       import SafiraWeb.Components.Button
 
       unquote(html_helpers())
@@ -74,6 +75,7 @@ defmodule SafiraWeb do
       use Phoenix.LiveView,
         layout: {SafiraWeb.Layouts, :backoffice}
 
+      import SafiraWeb.Components.Avatar
       import SafiraWeb.Components.EnsurePermissions
       import SafiraWeb.BackofficeHelpers
 
@@ -84,7 +86,7 @@ defmodule SafiraWeb do
   def live_component do
     quote do
       use Phoenix.LiveComponent
-
+      import SafiraWeb.Components.Avatar
       unquote(html_helpers())
     end
   end

lib/safira_web/components/avatar.ex

@@ -5,6 +5,7 @@ defmodule SafiraWeb.Components.Sidebar do
   use SafiraWeb, :component
 
   import SafiraWeb.CoreComponents
+  import SafiraWeb.Components.Avatar
   alias Phoenix.LiveView.JS
 
   attr :pages, :list, default: []
@@ -143,7 +144,7 @@ defmodule SafiraWeb.Components.Sidebar do
 
   def sidebar_account_dropdown(assigns) do
     ~H"""
-    <.user_dropdown id={@id} border={@border} icon_color={@icon_color}>
+    <.user_dropdown id={@id} border={@border} icon_color={@icon_color} user={@user}>
       <:img src={"https://github.com/identicons/#{@user.handle |> String.slice(0..2)}.png"} />
       <:title color={@title_color}><%= @user.name %></:title>
       <:subtitle color={@subtitle_color}>@<%= @user.handle %></:subtitle>
@@ -175,6 +176,8 @@ defmodule SafiraWeb.Components.Sidebar do
     attr :method, :any
   end
 
+  attr :user, :map, required: true
+
   defp user_dropdown(assigns) do
     ~H"""
     <!-- User account dropdown -->
@@ -190,8 +193,8 @@ defmodule SafiraWeb.Components.Sidebar do
         >
           <span class={"flex w-full justify-between items-center #{@icon_color}"}>
             <span class="flex min-w-0 items-center justify-between space-x-3">
-              <%= for img <- @img do %>
-                <img class="w-10 h-10 rounded-full flex-shrink-0" alt="" {assigns_to_attributes(img)} />
+              <%= for _img <- @img do %>
+                <.avatar size={:sm} handle={@user.handle} />
               <% end %>
               <span class="flex-1 flex flex-col min-w-0">
                 <span class={"#{@title |> Enum.at(0) |> Map.get(:color)}  text-sm font-medium truncate"}>

lib/safira_web/components/sidebar.ex

@@ -13,10 +13,7 @@
     <.table id="attendees-table" items={@streams.attendees} meta={@meta} params={@params}>
       <:col :let={{_id, user}} sortable field={:name} label="Name">
         <div class="flex gap-4 flex-center items-center">
-          <img
-            class="rounded-full h-10"
-            src={"https://github.com/identicons/#{user.handle |> String.slice(0..2)}.png"}
-          />
+          <.avatar handle={user.handle} />
           <div class="self-center">
             <p class="text-base font-semibold"><%= user.name %></p>
             <p class="font-normal">@<%= user.handle %></p>

lib/safira_web/live/backoffice/attendee_live/index.html.heex

@@ -5,10 +5,7 @@
     </.button>
   </:actions>
   <div class="flex flex-col items-center gap-4 w-full sm:w-fit py-8">
-    <img
-      class="rounded-full w-48 h-48"
-      src={"https://github.com/identicons/#{@attendee.user.handle |> String.slice(0..2)}.png"}
-    />
+    <.avatar size={:xl} handle={@attendee.user.handle} />
     <div>
       <h1 class="text-xl font-semibold"><%= @attendee.user.name %></h1>
       <p class="text-sm">@<%= @attendee.user.handle %></p>

lib/safira_web/live/backoffice/attendee_live/show.html.heex

@@ -36,10 +36,7 @@ defmodule SafiraWeb.Backoffice.ScheduleLive.SpeakerLive.Index do
                     src={Uploaders.Speaker.url({speaker.picture, speaker}, :original)}
                   />
                 <% else %>
-                  <img
-                    class="rounded-full h-10"
-                    src={"https://github.com/identicons/#{speaker.name |> String.slice(0..2)}.png"}
-                  />
+                  <.avatar handle={speaker.name} />
                 <% end %>
                 <div class="self-center">
                   <p class="text-base font-semibold"><%= speaker.name %></p>

lib/safira_web/live/backoffice/schedule_live/speaker_live/index.ex

@@ -23,10 +23,7 @@
     <.table id="staffs-table" items={@streams.staffs} meta={@meta} params={@params}>
       <:col :let={{_id, user}} sortable field={:name} label="Name">
         <div class="flex gap-4 flex-center items-center">
-          <img
-            class="rounded-full h-10"
-            src={"https://github.com/identicons/#{user.handle |> String.slice(0..2)}.png"}
-          />
+          <.avatar handle={user.handle} />
           <div class="self-center">
             <p class="text-base font-semibold"><%= user.name %></p>
             <p class="font-normal">@<%= user.handle %></p>