fixup! Add Badge component

app/views/components/examples/badges/empty_component.rb

@@ -0,0 +1,16 @@
+module Examples
+  module Badges
+    class EmptyComponent < Base
+      def title
+        "Empty badge"
+      end
+
+      def example
+        Badge :lg, :primary
+        Badge :md, :primary
+        Badge :sm, :primary
+        Badge :xs, :primary
+      end
+    end
+  end
+end

app/views/components/examples/badges/in_a_button_component.rb

@@ -0,0 +1,25 @@
+module Examples
+  module Badges
+    class InAButtonComponent < Base
+      def title
+        "Badge in a button"
+      end
+
+      def example
+        Button do
+          plain "Inbox"
+          Badge do
+            "+99"
+          end
+        end
+
+        Button do
+          plain "Inbox"
+          Badge :secondary do
+            "+99"
+          end
+        end
+      end
+    end
+  end
+end

app/views/components/examples/badges/in_a_text_component.rb

@@ -0,0 +1,39 @@
+module Examples
+  module Badges
+    class InATextComponent < Base
+      def title
+        "Badge in a text"
+      end
+
+      def example
+        h2 class: "text-xl" do
+          plain "Heading"
+          Badge :lg do
+            "NEW"
+          end
+        end
+
+        h3 class: "text-lg" do
+          plain "Heading"
+          Badge :md do
+            "NEW"
+          end
+        end
+
+        h4 class: "text-base" do
+          plain "Heading"
+          Badge :sm do
+            "NEW"
+          end
+        end
+
+        h5 class: "text-sm" do
+          plain "Heading"
+          Badge :xs do
+            "NEW"
+          end
+        end
+      end
+    end
+  end
+end

app/views/components/examples/badges/sizes_component.rb

@@ -0,0 +1,27 @@
+module Examples
+  module Badges
+    class SizesComponent < Base
+      def title
+        "Badge sizes"
+      end
+
+      def example
+        Badge :lg do
+          "987,654"
+        end
+
+        Badge :md do
+          "987,654"
+        end
+
+        Badge :sm do
+          "987,654"
+        end
+
+        Badge :xs do
+          "987,654"
+        end
+      end
+    end
+  end
+end

app/views/components/examples/badges/with_state_colors_component.rb

@@ -0,0 +1,49 @@
+module Examples
+  module Badges
+    class WithStateColorsComponent < Base
+      def title
+        "Badge with state colors"
+      end
+
+      def example
+        Badge :info, class: "gap-2" do
+          x_svg
+          plain "info"
+        end
+
+        Badge :success, class: "gap-2" do
+          x_svg
+          plain "success"
+        end
+
+        Badge :warning, class: "gap-2" do
+          x_svg
+          plain "warning"
+        end
+
+        Badge :error, class: "gap-2" do
+          x_svg
+          plain "error"
+        end
+      end
+
+      private
+
+      def x_svg
+        svg(
+          xmlns: "http://www.w3.org/2000/svg",
+          fill: "none",
+          viewbox: "0 0 24 24",
+          class: "inline-block h-4 w-4 stroke-current"
+        ) do |s|
+          s.path(
+            stroke_linecap: "round",
+            stroke_linejoin: "round",
+            stroke_width: "2",
+            d: "M6 18L18 6M6 6l12 12"
+          )
+        end
+      end
+    end
+  end
+end

app/views/examples/badges/show_view.rb

@@ -9,7 +9,12 @@ def view_template
         render_examples [
           BasicComponent,
           WithBrandColorsComponent,
-          OutlineComponent
+          OutlineComponent,
+          SizesComponent,
+          EmptyComponent,
+          WithStateColorsComponent,
+          InATextComponent,
+          InAButtonComponent
         ]
       end
     end