Add a alert to list the sidebar requirements

Author: lsouoliveira

app/views/docs/sidebar.rb

@@ -9,6 +9,26 @@ def view_template
 
       Heading(level: 2) { "Usage" }
 
+      Alert do
+        info_icon()
+        AlertTitle { "Requirements" }
+        AlertDescription { "The sidebar component depends on the following components:" }
+        ul(class: "list-disc list-inside") do
+          li do
+            InlineLink(href: docs_sheet_path, target: "_blank", class: "inline-flex items-center gap-2")do
+              span { "Sheet" }
+              external_icon_link()
+            end
+          end
+          li do
+            div(class: "inline-flex items-center gap-2") do
+              InlineLink(href: docs_separator_path, target: "_blank") { "Separator" }
+              external_icon_link()
+            end
+          end
+        end
+      end
+
       render Docs::VisualCodeExample.new(title: "Example", src: "/docs/sidebar/example", context: self) do
         Views::Docs::Sidebar::Example::CODE
       end
@@ -120,4 +140,37 @@ def inbox_icon
       s.path(d: "M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z")
     end
   end
+
+  def external_icon_link
+    svg(
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      stroke_width: "2",
+      stroke_linecap: "round",
+      stroke_linejoin: "round",
+      class: "lucide lucide-external-link-icon lucide-external-link size-3"
+    ) do |s|
+      s.path(d: "M15 3h6v6")
+      s.path(d: "M10 14 21 3")
+      s.path(d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6")
+    end
+  end
+
+  def info_icon
+    svg(
+      xmlns: "http://www.w3.org/2000/svg",
+      viewbox: "0 0 24 24",
+      fill: "currentColor",
+      class: "w-5 h-5"
+    ) do |s|
+      s.path(
+        fill_rule: "evenodd",
+        d:
+          "M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 01.67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 11-.671-1.34l.041-.022zM12 9a.75.75 0 100-1.5.75.75 0 000 1.5z",
+        clip_rule: "evenodd"
+      )
+    end
+  end
 end