Hero

New — Breadcrumb component ↗

The UI component library for your next application

A component library for Ruby applications, powered by Phlex. Written in Ruby, styled with Tailwind CSS.

render Components::Hero.new(orientation: :horizontal) do |hero|
  hero.container do
    hero.headline { "New — Breadcrumb component ↗" }
    hero.title { "The UI component library for your next application" }
    hero.description { "A component library for Ruby applications, powered by Phlex. Written in Ruby, styled with Tailwind CSS." }
    div(class: "flex flex-row flex-wrap gap-2") do
      hero.button(href: installation_path) do
        plain "Get started"
        render Phlex::Icons::Iconoir::ArrowUpRight.new(class: "size-3", stroke_width: 2.5)
      end
      hero.button(href: components_path, color: :secondary) do
        plain "Browse components"
        render Phlex::Icons::Iconoir::ArrowUpRight.new(class: "size-3", stroke_width: 2.5)
      end
    end
  end
end

Installation

Add the component to your project

CLI

Run the following command in your terminal

bundle exec essence add hero

Manually

Add the following code and libraries into your project

components/hero.rb

# frozen_string_literal: true

class Components::Hero < Components::Essence
  attr_reader :orientation, :reverse

  def initialize(orientation: :horizontal, reverse: false, **attributes)
    @orientation = orientation
    @reverse = reverse
    super(**attributes)
  end

  def view_template(&) = div(**attributes, &)
  def container(**, &) = div(**m(**), &)
  def headline(**, &) = (render Components::Badge.new(**m(**), &))
  def title(**, &) = (render Components::Heading.new(**m(**), &))
  def description(**, &) = (render Components::Text.new(**m(**), &))
  def button(**, &) = (render Components::Button.new(**m(**), &))

  private

  def component_attributes
    {
      headline: {
        color: :secondary
      },
      title: {
        as: :h1,
        size: "2xl"
      },
      description: {
        size: "lg"
      },
      button: {
        kind: :primary
      }
    }.freeze
  end

  def component_classes
    {
      _: {
        _: "py-16 lg:py-24",
        orientation: {
          none: "",
          horizontal: "",
          vertical: "text-center flex flex-col items-center justify-center"
        }
      },
      container: {
        _: "max-w-7xl mx-auto flex flex-col gap-6 p-8",
        orientation: {
          none: "",
          horizontal: "",
          vertical: "items-center"
        }
      },
      title: {
        _: "max-w-2xl"
      },
      description: {
        _: "max-w-xl text-xl text-gray-950/50"
      }
    }.freeze
  end
end