logo

Breadcrumbs Navigation with Icon

InfoGeneratePackages

This code defines a Ruby class named `BreadcrumbsWithIconsComponent` that inherits from `ApplicationView`, which likely is part of a web application framework. The class has a `template` method that generates HTML content for breadcrumbs navigation with three sections: "Home", "Documents", and "Add Document". Each section is represented as a list item (`li`) within an unordered list (`ul`) and contains an icon (SVG) followed by plain text. The icons are different for each breadcrumb item but the code for the "Home" and "Documents" icons is the same in this snippet. The breadcrumbs are styled with CSS classes indicating their size, border styling, and alignment. The code utilizes a domain-specific language (DSL) for generating HTML content, suggesting it's part of a Ruby-based web framework, potentially Rails or a similar technology.

class BreadcrumbsWithIconsComponent < ApplicationView
  def template
    div(class: "text-sm breadcrumbs") do
      ul do
        li do
          a do
            svg(xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", class: "w-4 h-4 stroke-current") do |svg|
              svg.path(stroke_linecap: "round", stroke_linejoin: "round", stroke_width: "2", d: "M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2")
            end
            plain "Home"
          end
        end
        li do
          a do
            svg(xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", class: "w-4 h-4 stroke-current") do |svg|
              svg.path(stroke_linecap: "round", stroke_linejoin: "round", stroke_width: "2", d: "M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2")
            end
            plain "Documents"
          end
        end
        li do
          span(class: "inline-flex gap-2 items-center") do
            svg(xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", class: "w-4 h-4 stroke-current") do |svg|
              svg.path(stroke_linecap: "round", stroke_linejoin: "round", stroke_width: "2", d: "M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z")
            end
            plain "Add Document"
          end
        end
      end
    end
  end
end

Children