AppleProductTimelineComponent

Info Generate Packages

This Ruby code defines a class named `TimelineComponent`, which inherits from `ApplicationComponent`. The main purpose of the class is to generate an HTML structure for a timeline presentation using a series of list items (`

`). This presentation can display significant events or milestones – in this instance related to Apple Inc. products (e.g., First Macintosh computer, iMac, iPod, iPhone, Apple Watch). Each timeline item consists of three parts: the start box (`timeline-start timeline-box`), the middle section with an SVG icon (`timeline-middle`), and optionally the end box (`timeline-end timeline-box`). The start and end boxes contain textual content signifying the event, while the middle section includes a horizontally-centered SVG checkmark icon. The SVG icon indicates a completed event or milestone. The timeline can be styled differently with additional classes (mentioned in the comment) to be displayed either vertically or horizontally. Horizontal rules (`

`) are used to visually separate items on the timeline.

# frozen_string_literal: true

# Timeline component can be modified by the following classes:
# timeline-vertical: shows the timeline as vertical
# timeline-horizontal: shows the timeline horizontally

class TimelineComponent < ApplicationComponent
  def template
    ul(class: "timeline") do
      li do
        div(class: "timeline-start timeline-box") { "First Macintosh computer" }
        div(class: "timeline-middle") do
          svg(xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", class: "w-5 h-5 text-primary") do |svg|
            svg.path(fill_rule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z", clip_rule: "evenodd")
          end
        end
        hr(class: "bg-primary")
      end
      li do
        hr(class: "bg-primary")
        div(class: "timeline-middle") do
          svg(xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", class: "w-5 h-5 text-primary") do |svg|
            svg.path(fill_rule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z", clip_rule: "evenodd")
          end
        end
        div(class: "timeline-end timeline-box") { "iMac" }
        hr(class: "bg-primary")
      end
      li do
        hr(class: "bg-primary")
        div(class: "timeline-start timeline-box") { "iPod" }
        div(class: "timeline-middle") do
          svg(xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", class: "w-5 h-5 text-primary") do |svg|
            svg.path(fill_rule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z", clip_rule: "evenodd")
          end
        end
        hr
      end
      li do
        hr
        div(class: "timeline-middle") do
          svg(xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", class: "w-5 h-5") do |svg|
            svg.path(fill_rule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z", clip_rule: "evenodd")
          end
        end
        div(class: "timeline-end timeline-box") { "iPhone" }
        hr
      end
      li do
        hr
        div(class: "timeline-start timeline-box") { "Apple Watch" }
        div(class: "timeline-middle") do
          svg(xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", class: "w-5 h-5") do |svg|
            svg.path(fill_rule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z", clip_rule: "evenodd")
          end
        end
      end
    end
  end
end

Try a prompt