Feature: Extract card message component

app/assets/stylesheets/application.css.scss.erb

@@ -44,7 +44,7 @@
 @import "file_uploader";
 @import "browse";
 @import "flatpickr/dist/themes/light";
-
+@import "card_message";
 /* Bootstrap and Font Awesome */
 @import "bootstrap";
 @import "bootstrap_overrides";

app/assets/stylesheets/card_message.scss

@@ -0,0 +1,40 @@
+.card-message-card{
+    margin-top: 30px;
+    padding: 37px 41px;
+    box-shadow: rgba(0, 0, 0, 0.05) 0px 20px 50px;
+    border-radius: 14px;
+}
+.card-message-title{
+    font-size: 19px;
+    text-align: center;
+    margin-bottom: 10px;
+    font-weight: 700;
+}
+.card-message-text{
+    text-align: center;
+    width: 310px;
+    font-size: 14px;
+    font-weight: 500;
+    margin-bottom: 21px;
+}
+.card-message-button{
+    padding: 16px;
+    border-radius: 9px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    text-decoration: none !important;
+}
+.card-message-button-success{
+    color: var(--primary-color);
+    border: 1px solid var(--primary-color);
+}
+.card-message-button-failure{
+    color: #EE404C !important;
+    border: 1px solid #EE404C;
+}
+.card-message-has-title{
+    color: #666666;
+    font-weight: 400;
+}

app/components/card_message_component.rb

@@ -0,0 +1,26 @@
+class CardMessageComponent < ViewComponent::Base
+    def initialize(title: nil ,message:, button_text: nil, type:)
+        @title = title
+        @message = message
+        @button_text = button_text
+        @type = type
+
+    end
+
+    def no_title?
+        @title.nil?
+    end
+
+    def no_button?
+        @button_text.nil?
+    end
+
+    def icon
+        case @type
+        when "success"
+            "green-check.svg"
+        when "failure"
+            "red-warning.svg"
+        end
+    end
+end

app/components/card_message_component/card_message_component.html.haml

@@ -0,0 +1,20 @@
+.d-flex.justify-content-center.m-4
+  .card-message-card
+    .d-flex.justify-content-center.mb-4
+      %img{:src => "#{asset_path(icon)}"}/
+    - if no_title?
+      %p.card-message-text
+        = @message
+    - else
+      %h2.card-message-title
+        = @title
+      %p.card-message-text.card-message-has-title
+        = @message
+    - unless no_button?
+      - case @type
+      - when "success"
+        %a.card-message-button.card-message-button-success{:href => "/"}
+          = @button_text
+      - when "failure"
+        %a.card-message-button.card-message-button-failure{:href => "/"}
+          = @button_text