ResponsiveBottomNavigationBar

Info Generate Packages

This Ruby code defines a class named `BottomNavigationComponent` which inherits from `ApplicationComponent`. The class has a `template` method that generates HTML markup for a bottom navigation bar using div and button elements. The navigation bar includes three buttons, each containing an SVG icon and a label ('Home', 'Warnings', 'Statics'). The buttons can be styled with various size classes (e.g., 'btm-nav-xs', 'btm-nav-sm', etc.) and the labels can be color-modified using text color classes (e.g., 'text-primary', 'text-secondary', etc.). One of the buttons is marked with an 'active' class, indicating it is the currently active or selected navigation option. The SVG graphics are used as icons for the buttons and are defined inline within each button. This structure allows for a customizable and responsive bottom navigation bar in a web application.

# frozen_string_literal: true

# Bottom Nav container can be modified by size: btm-nav-xs, btm-nav-sm, btm-nav-md, btm-nav-lg
# Bottom nav buttons can be modified by colors: text-primary, text-secondary, text-accent, etc

class BottomNavigationComponent < ApplicationComponent
  def template
    div(class: "btm-nav") do
      button do
        svg(xmlns: "http://www.w3.org/2000/svg", class: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor") do |svg|
          svg.path(stroke_linecap: "round", stroke_linejoin: "round", stroke_width: "2", d: "M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6")
        end
        span(class: "btm-nav-label") { "Home" }
      end

      button(class: "active") do
        svg(xmlns: "http://www.w3.org/2000/svg", class: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor") do |svg|
          svg.path(stroke_linecap: "round", stroke_linejoin: "round", stroke_width: "2", d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z")
        end
        span(class: "btm-nav-label") { "Warnings" }
      end

      button do
        svg(xmlns: "http://www.w3.org/2000/svg", class: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor") do |svg|
          svg.path(stroke_linecap: "round", stroke_linejoin: "round", stroke_width: "2", d: "M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z")
        end
        span(class: "btm-nav-label") { "Statics" }
      end
    end
  end
end

Try a prompt