From 4338e7b61c30a6a1e36b67bb0a515591b18b7b0a Mon Sep 17 00:00:00 2001
From: Eduardo Ravagnani <48652031+link2755@users.noreply.github.com>
Date: Thu, 16 Nov 2023 16:54:31 -0300
Subject: [PATCH] Componente Label #86 (#136)

---
 apps/plataforma_digital/assets/css/app.scss   |  1 +
 apps/plataforma_digital/assets/css/label.scss | 25 +++++++++++++++++++
 .../lib/plataforma_digital/design_system.ex   | 21 ++++++++++++++++
 3 files changed, 47 insertions(+)
 create mode 100644 apps/plataforma_digital/assets/css/label.scss

diff --git a/apps/plataforma_digital/assets/css/app.scss b/apps/plataforma_digital/assets/css/app.scss
index 6da93a31..cd73eb1b 100644
--- a/apps/plataforma_digital/assets/css/app.scss
+++ b/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
diff --git a/apps/plataforma_digital/assets/css/label.scss b/apps/plataforma_digital/assets/css/label.scss
new file mode 100644
index 00000000..020ae686
--- /dev/null
+++ b/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
+}
\ No newline at end of file
diff --git a/apps/plataforma_digital/lib/plataforma_digital/design_system.ex b/apps/plataforma_digital/lib/plataforma_digital/design_system.ex
index 2c58289b..643e7b56 100644
--- a/apps/plataforma_digital/lib/plataforma_digital/design_system.ex
+++ b/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