logo

ShoppingCartAndUserProfileNavbar

InfoGeneratePackages

This code defines a Ruby class named "NavbarWithIconIndicatorAndDropdownComponent", which is a subclass of "ApplicationComponent". The class contains a method called "template" which generates HTML content to create a responsive navigation bar for a web application. The navigation bar contains the "daisyUI" logo, an icon indicator that shows a shopping cart with an item count, and a dropdown menu that details the items in the cart including a button to view the cart. Additionally, there's a user profile icon with a dropdown menu that includes options for "Profile", "Settings", and "Logout", with a "New" indicator next to the "Profile" option. This component uses Tailwind CSS for styling and is designed to enhance the user interface experience with visually appealing elements and interactive features like dropdown menus and icon indicators.

# frozen_string_literal: true

class NavbarWithIconIndicatorAndDropdownComponent < 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
        div(class: "dropdown dropdown-end") do
          div(tabindex: "0", role: "button", class: "btn btn-ghost btn-circle") do
            div(class: "indicator") 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 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z")
              end
              span(class: "badge badge-sm indicator-item") { "8" }
            end
          end
          div(tabindex: "0", class: "mt-3 z-[1] card card-compact dropdown-content w-52 bg-base-100 shadow") do
            div(class: "card-body") do
              span(class: "font-bold text-lg") { "8 Items" }
              span(class: "text-info") { "Subtotal: $999" }
              div(class: "card-actions") do
                button(class: "btn btn-primary btn-block") { "View cart" }
              end
            end
          end
        end
        div(class: "dropdown dropdown-end") do
          div(tabindex: "0", role: "button", class: "btn btn-ghost btn-circle avatar") do
            div(class: "w-10 rounded-full") do
              img(alt: "Tailwind CSS Navbar component", src: "https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg")
            end
          end
          ul(tabindex: "0", class: "menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52") do
            li do
              a(class: "justify-between") do
                "Profile"
                span(class: "badge") { "New" }
              end
            end
            li { a { "Settings" } }
            li { a { "Logout" } }
          end
        end
      end
    end
  end
end

Children