Alert

Heads up!

There are new tasks in your inbox.

Success

Task has been completed successfully!

Error

Something went wrong with your request.

Warning

This action will take some time to be processed.

render Alert.new do |alert|
  alert.icon(class: "mb-4") { render Phlex::Icons::Iconoir::InfoCircle.new(class: "size-4") }
  alert.title { "Heads up!" }
  alert.description { "There are new tasks in your inbox." }
end

render Alert.new(kind: :success) do |alert|
  alert.icon(class: "mb-4") { render Phlex::Icons::Iconoir::CheckCircle.new(class: "size-4") }
  alert.title { "Success" }
  alert.description { "Task has been completed successfully!" }
end

render Alert.new(kind: :critical) do |alert|
  alert.icon(class: "mb-4") { render Phlex::Icons::Iconoir::XmarkCircle.new(class: "size-4") }
  alert.title { "Error" }
  alert.description { "Something went wrong with your request." }
end

render Alert.new(kind: :warning) do |alert|
  alert.icon(class: "mb-4") { render Phlex::Icons::Iconoir::WarningTriangle.new(class: "size-4") }
  alert.title { "Warning" }
  alert.description { "This action will take some time to be processed." }
end

Installation

Add the component to your project

CLI

Run the following command in your terminal

bundle exec essence add alert

Manually

Copy and paste the following code into your project

# frozen_string_literal: true

class Components::Alert < Components::Essence
  BASE = "bg-white border-l-2 flex flex-col p-3 sm:p-4 bg-gray-50/50"
  TITLE_BASE = "text-gray-900 text-sm sm:text-base font-medium w-full"
  DESCRIPTION_BASE = "text-gray-700 flex text-xs sm:text-sm w-full"
  ICON_BASE = "inline-flex items-center justify-center w-fit size-7 rounded-xs"

  KINDS = {
    primary: "border-blue-500",
    critical: "border-rose-600",
    warning: "border-orange-400",
    success: "border-emerald-500"
  }

  ICON_KINDS = {
    primary: "bg-blue-500 text-white",
    critical: "bg-rose-600 text-white",
    warning: "bg-orange-400 text-gray-900",
    success: "bg-emerald-500 text-white"
  }

  attr_reader :kind
  attr_reader :attributes

  def initialize(kind: :primary, **attributes)
    @kind = kind
    super(**attributes)
    @attributes[:class] = merge_classes([ BASE, KINDS[kind], attributes[:class] ])
  end

  def view_template(&)
    div(**attributes, &)
  end

  def title(**mattributes, &)
    mattributes[:class] = merge_classes([ TITLE_BASE, mattributes[:class] ])
    h5(**mattributes, &)
  end

  def description(**mattributes, &)
    mattributes[:class] = merge_classes([ DESCRIPTION_BASE, mattributes[:class] ])
    p(**mattributes, &)
  end

  def icon(**mattributes, &)
    mattributes[:class] = merge_classes([ ICON_BASE, ICON_KINDS[kind], mattributes[:class] ])
    div(**mattributes, &)
  end
end