logo

BrowserMockupWithContentComponent

InfoGenerateCreated ByPackages

This code defines a Ruby class `BrowserMockupWithContentComponent` that inherits from `ApplicationComponent`. The `template` method generates HTML content for a mockup browser. The mockup browser consists of the following parts:
1. A `mockup-browser` container with a border and background.
2. A toolbar displaying a URL.
3. A content area that centers and displays a phone number.
4. A grid layout with four sections, each styled with padding and a background color.
This setup is likely used for demonstrating a browser-like interface in a web application.

class BrowserMockupWithContentComponent < ApplicationComponent
  def template
    div class: "mockup-browser border bg-base-300" do
      div class: "mockup-browser-toolbar" do
        div class: "input" do
          "https://sublayer.com"
        end
      end
      div class: "flex justify-center px-4 py-16 bg-base-200" do
        "+1 800-305-3565"
      end
      div class: "grid grid-cols-4 gap-4 p-4" do
        div class: "col-span-1 bg-gray-100 p-4" do
          "Section 1"
        end
        div class: "col-span-1 bg-gray-100 p-4" do
          "Section 2"
        end
        div class: "col-span-1 bg-gray-100 p-4" do
          "Section 3"
        end
        div class: "col-span-1 bg-gray-100 p-4" do
          "Section 4"
        end
      end
    end
  end
end