Add the sidebar component (#180)

Author: lsouoliveira

Gemfile.lock

@@ -14,10 +14,10 @@ GIT
 
 GIT
   remote: https://github.com/ruby-ui/ruby_ui.git
-  revision: 957bcffb1e393b7db30c7576734f4ad5b40bb7cf
+  revision: eea116e5fa397a1b544fb8574a8014e132193e90
   branch: main
   specs:
-    ruby_ui (1.0.0.beta1)
+    ruby_ui (1.0.0.rc1)
 
 GEM
   remote: https://rubygems.org/

app/components/shared/menu.rb

@@ -96,6 +96,7 @@ def components
           {name: "Progress", path: docs_progress_path, badge: "New"},
           {name: "Radio Button", path: docs_radio_button_path, badge: "New"},
           {name: "Select", path: docs_select_path, badge: "New"},
+          {name: "Separator", path: docs_separator_path, badge: "New"},
           {name: "Sheet", path: docs_sheet_path},
           {name: "Shortcut Key", path: docs_shortcut_key_path},
           {name: "Skeleton", path: docs_skeleton_path, badge: "New"},

app/controllers/docs_controller.rb

@@ -166,6 +166,10 @@ def select
     render Views::Docs::Select.new
   end
 
+  def separator
+    render Views::Docs::Separator.new
+  end
+
   def sheet
     render Views::Docs::Sheet.new
   end

app/views/docs/separator.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+class Views::Docs::Separator < Views::Base
+  def view_template
+    component = "Separator"
+
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      render Docs::Header.new(title: "Separator", description: "Visually or semantically separates content.")
+
+      Heading(level: 2) { "Usage" }
+
+      render Docs::VisualCodeExample.new(title: "Example", context: self) do
+        <<~RUBY
+          div do
+            div(class: "space-y-1") do
+              h4(class: "text-sm font-medium leading-none") { "RubyUI" }
+              p(class: "text-sm text-muted-foreground") { "An open-source UI component library." }
+            end
+            Separator(class: "my-4")
+            div(class: "flex h-5 items-center space-x-4 text-sm") do
+              div { "Blog" }
+              Separator(as: :hr, orientation: :vertical)
+              div { "Docs" }
+              Separator(orientation: :vertical)
+              div { "Source" }
+            end
+          end
+        RUBY
+      end
+
+      render Components::ComponentSetup::Tabs.new(component_name: component)
+
+      render Docs::ComponentsTable.new(component_files(component))
+    end
+  end
+end

config/routes.rb

@@ -47,6 +47,7 @@
     get "progress", to: "docs#progress", as: :docs_progress
     get "radio_button", to: "docs#radio_button", as: :docs_radio_button
     get "select", to: "docs#select", as: :docs_select
+    get "separator", to: "docs#separator", as: :docs_separator
     get "sheet", to: "docs#sheet", as: :docs_sheet
     get "shortcut_key", to: "docs#shortcut_key", as: :docs_shortcut_key
     get "skeleton", to: "docs#skeleton", as: :docs_skeleton