Feature: Extract chips component

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

@@ -45,10 +45,9 @@
 @import "browse";
 @import "lostpassword";
 @import "flatpickr/dist/themes/light";
-@import "card_message";
 @import "feedback";
 @import "login";
-
+@import "components/index";
 
 /* Bootstrap and Font Awesome */
 @import "bootstrap";

app/assets/stylesheets/components/chips.scss

@@ -0,0 +1,35 @@
+.chips-container div{
+    margin-right: 10px;
+}
+.chips-check-icon{
+    margin-left: 6px;
+    margin-right: 6px;
+    display: none;
+}
+
+.chips-container div label{
+    cursor: pointer;
+}
+.chips-container div label input[type="checkbox"]{
+    display: none;
+}
+.chips-container div label span{
+    position: relative;
+    display: inline-block;
+    background:white;
+    border: 0.5px solid #BDBDBD;
+    color: #a7a7a7;
+    padding: 8px;
+    border-radius: 5px;
+    font-size: 13px;
+    user-select: none;
+
+}
+.chips-container div label input[type="checkbox"]:checked ~ span{
+    border: 1px solid var(--primary-color);
+    color: var(--primary-color);
+}
+
+.chips-container div label input[type="checkbox"]:checked ~ span .chips-check-icon{
+    display:unset;
+}

app/assets/stylesheets/components/index.scss

@@ -0,0 +1,2 @@
+@import 'chips';
+@import 'card_message'

app/components/chips_component.rb

@@ -0,0 +1,6 @@
+class ChipsComponent < ViewComponent::Base
+    def initialize(name:, value:)
+        @name = name
+        @value = value
+    end
+end

app/components/chips_component/chips_component.html.haml

@@ -0,0 +1,7 @@
+.chips-container
+  %div
+    %label{:for => "chips-#{@name}-check"}
+      %input{:id => "chips-#{@name}-check", :name => @name, :type => "checkbox", :value => @value}/
+      %span
+        %img.chips-check-icon{:src => "#{asset_path('check.svg')}"}/
+        = @value