NavbarWithTitleAndIconComponent
This Ruby code defines a class named `NavbarWithTitleAndIconComponent` which is a subclass of `ApplicationComponent`. The class defines a `template` method that uses a DSL (Domain Specific Language) for defining a navbar component structure in HTML. The navbar is designed to have a base background color (`bg-base-100`) and consists of two main sections divided into flexible containers: one to display the brand name or logo (`daisyUI`), and the other for a button with an embedded SVG icon. The left part of the navbar (`flex-1`) contains a text element styled as a button (`btn-ghost text-xl`) that represents the brand. The right part (`flex-none`) includes a square button with no background (`btn-square btn-ghost`) housing an SVG drawing of three dots, suggesting more options or a menu. The SVG paths for the dots are defined with specific attributes like `stroke_linecap`, `stroke_linejoin`, and `stroke_width` to customize the appearance of the dots. This code follows Rubyist conventions, such as using the `frozen_string_literal: true` magic comment for immutable strings, illustrating an example of modern, component-based web UI development in Ruby.
# frozen_string_literal: true
class NavbarWithTitleAndIconComponent < ApplicationComponent
def template
div(class: "navbar bg-base-100") do
div(class: "flex-1") do
a(class: "btn btn-ghost text-xl") { "daisyUI" }
end
div(class: "flex-none") do
button(class: "btn btn-square btn-ghost") do
svg(xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", class: "inline-block w-5 h-5 stroke-current") do |svg|
svg.path(stroke_linecap: "round", stroke_linejoin: "round", stroke_width: "2", d: "M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z")
end
end
end
end
end
end