logo

CustomerCardComponentBlueprint

InfoGenerateCreated ByPackages

This code defines a Ruby class `CustomerCardComponent` that inherits from `ApplicationComponent`. The purpose of this class is to render a customer card UI component. The `template` method within the class builds an HTML structure using the methods provided by the component framework. It creates a card with a header section containing an avatar image, a customer name, and a customer location. The avatar image's size and border-radius can be customized using Tailwind CSS classes. Additionally, there are comments suggesting how to use masked avatars with specific classes like `mask-squircle`, `mask-hexagon`, and `mask-triangle`.

# frozen_string_literal: true

# use tailwind w-* classes to set size on child of .avatar
# use rounded-* to customize the border-radius of the image
# to use a masked avatar replace rounded with mask and use mask-* classes. ex: mask-squircle, mask-hexagon, mask-triangle

class CustomerCardComponent < ApplicationComponent
  def template
    div(class: "card") do
      div(class: "card-header") do
        div(class: "avatar w-24 rounded") do
          img(src: "https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg")
        end
        h2(class: "customer-name") { "Customer Name" }
        p(class: "customer-location") { "Customer Location" }
      end
    end
  end
end