Componente Label #86 (#136)

apps/plataforma_digital/assets/css/app.scss

@@ -170,6 +170,7 @@ footer {
 @import "./toast.scss";
 @import "./textarea.scss";
 @import "./tabela.scss";
+@import "./label.scss";
 
 // Páginas
 // Sem autenticação

apps/plataforma_digital/assets/css/label.scss

@@ -0,0 +1,25 @@
+.label_component {
+  @apply inline-block;
+
+  justify-content: center;
+  border-radius: 0.25rem;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  margin: 0.5rem;
+}
+
+.label_component:nth-child(4n+2) {
+    @apply bg-blue-100
+}
+
+.label_component:nth-child(4n+3) {
+    @apply bg-orange-100
+}
+
+.label_component:nth-child(4n+4) {
+    @apply bg-green-100
+}
+
+.label_component:nth-child(4n+5) {
+    @apply bg-red-100
+}

apps/plataforma_digital/lib/plataforma_digital/design_system.ex

@@ -603,4 +603,25 @@ defmodule PlataformaDigital.DesignSystem do
     </div>
     """
   end
+
+  @doc """
+  Componente de etiqueta, pode ser usado como marcador de imagens, de palavras chave
+  ou mesmo para visualização de dados diferentes dentro de um mesmo contexto.
+
+  Recebe os atributos:
+  - `message`: texto a ser exibido na label
+
+  """
+
+  attr(:id, :string, default: nil)
+  attr(:name, :string, default: nil)
+  attr(:message, :string, default: nil)
+
+  def label(assigns) do
+    ~H"""
+    <div class="label_component">
+      <.text size="base" color="text-white-100"><%= @message %></.text>
+    </div>
+    """
+  end
 end