Alert

= render AlertComponent.new(type: :info, icon: "", position: "flex-justify-center") do
  | Ceci est une alerte d'information centrée.
= render AlertComponent.new(type: :success, icon: "info", position: "flex-justify-start") do
  ' Ceci est une alerte de succès
  br
  ' sur
  br
  ' plusieurs
  br
  ' lignes
= render AlertComponent.new(type: :danger, icon: "trash-bold", position: "flex-justify-start") do
  | Ceci est une alerte de danger.
= render AlertComponent.new(type: :warning, icon: "megaphone", position: "flex-justify-start") do
  | Ceci est un avertissement.
= render AlertComponent.new(type: :transparent, icon: "info", position: "flex-justify-start") do
  | Ceci est une alerte sans mise en avant particulière mais proprement espacée.

/  Privilégiez l'utilisation de AlertComponent plutôt que le format html classique
/
/ .alert-info
/   .align-center
/     | Ceci est une alerte d'information centrée.
/
/ .alert-success
/   .ph-info
/     | Ceci est une alerte de succès<br>sur<br>plusieurs<br>lignes
/
/ .alert-danger
/   .ph-trash-bold
/     | Ceci est une alerte de danger.
/
/ .alert-warning
/   .ph-megaphone
/     | Ceci est un avertissement.
/
/ .alert-transparent
/   .ph-info
/     | Ceci est une alerte sans mise en avant particulière mais proprement espacée.
/
= render MessageComponent.new(title: "La puissance de votre compteur est supérieur à 36 kVA.",
  description: "Nous vous invitons à contacter le service client pour plus d'informations.",
  type: "info")

= render MessageComponent.new(title: "La puissance de votre compteur est supérieur à 36 kVA.",
  description: "Nous vous invitons à contacter le service client pour plus d'informations.",
  type: "info",
  trigger: true)

= render MessageComponent.new(title: "La puissance de votre compteur est supérieur à 36 kVA.",
  description: "Nous vous invitons à contacter le service client pour plus d'informations.",
  type: "warning",
  trigger: true)

= render MessageComponent.new(description: "Nous vous invitons à contacter le service client pour plus d'informations.",
  type: "warning",
  trigger: true)

= render MessageComponent.new(title: "Nous vous invitons à contacter le service client pour plus d'informations.",
  type: "warning",
  trigger: true)

= render IconColoredTextComponent.new(icon: "user-circle-bold", text_colored: "couleur", text_normal: "pas couleur", color: "rouge")
= render IconColoredTextComponent.new(icon: "user-circle-bold", text_colored: "couleur", text_normal: "pas couleur", color: "bleu")
= render IconColoredTextComponent.new(icon: "user-circle-bold", text_colored: "couleur", text_normal: "pas couleur", color: "vert")