✨ Add game card badges (#190)

app/components/games/card/badge_component.html.erb

@@ -0,0 +1,3 @@
+<%= content_tag :span, class: classes do %>
+  <%= text %>
+<% end %>

app/components/games/card/badge_component.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+module Games
+  module Card
+    class BadgeComponent < ViewComponent::Base
+      BASE_CLASSES = "absolute -top-2 -right-2 uppercase p-2 text-xs rounded drop-shadow-md
+        font-black lg:font-bold border".squish
+
+      COLOR_CLASSES = {
+        coming_soon: "bg-[#5A94FF] text-white border-[#4876cc]",
+        pre_order: "bg-[#C65AFF] text-white border-[#763699]",
+        new_release: "bg-[#ADFF5A] text-black border-[#80FE00]"
+      }.freeze
+
+      def initialize(game:)
+        @game = game
+      end
+
+      private
+
+      attr_reader :game
+
+      def render?
+        type.present?
+      end
+
+      def type
+        if game.pre_order? then :pre_order
+        elsif game.coming_soon? then :coming_soon
+        elsif game.new_release? then :new_release
+        end
+      end
+
+      def text
+        {
+          coming_soon: t(".coming_soon"),
+          pre_order: t(".pre_order"),
+          new_release: t(".new_release")
+        }[type]
+      end
+
+      def classes
+        [BASE_CLASSES, COLOR_CLASSES[type]]
+      end
+    end
+  end
+end

app/components/games/card_component.html.erb

@@ -1,7 +1,9 @@
-<div class="card border border-gray-700 bg-base-200">
+<div class="card border border-gray-700 bg-base-200 overflow-visible w-[98%]">
+  <%= badge %>
+
   <%= link_to game_path(game.slug) do %>
     <figure class="w-full aspect-video">
-      <%= image_tag game.small_banner_url, class: "w-full", width: 480, height: 320, alt: game.title, loading: :lazy %>
+      <%= image_tag game.small_banner_url, class: "w-full rounded-t-xl", width: 480, height: 320, alt: game.title, loading: :lazy %>
     </figure>
   <% end %>
 

app/components/games/card_component.rb

@@ -11,5 +11,9 @@ def initialize(game:)
     private
 
     attr_reader :game
+
+    def badge
+      render Games::Card::BadgeComponent.new(game: game)
+    end
   end
 end

config/locales/pt-BR/components/games.yml

@@ -24,3 +24,9 @@ pt-BR:
       title: Nenhum jogo encontrado
       description: Não há nenhum jogo para ser exibido aqui
       action: Ver todos os jogos
+
+    card:
+      badge_component:
+        coming_soon: Em breve
+        pre_order: Reserve já
+        new_release: Lançamento