Bootstrap building Blocks for your Ruby on Rails application

<% Struct.new("Customer", :name, :twitter_handle, :last_login_at, :active) %>

<% customers = [
     Struct::Customer.new("Alice Johnson", "alice_j", Time.now - 3600, true),
     Struct::Customer.new("Bob Smith", "bob_s", Time.now - 7200, true),
     Struct::Customer.new("Charlie Brown", "charlie_b", Time.now - 10800, false)
   ] %>

<div class="p-4">
  <%= render Railsboot::HeaderComponent.new do |header| %>
    <% header.with_heading.with_content("All Customers") %>
    <% header.with_breadcrumb.with_items([{text: "Main", href: "#"}, {text: "Customers", active: true}]) %>
  <% end %>

  <div class="row mt-4">
    <div class="col-sm-12 col-md-8">
      <%= render Railsboot::CardComponent.new do |card| %>
        <% card.with_header { render Railsboot::BadgeComponent.new(color: "warning").with_content("#{customers.size} Customers") } %>
        <% card.with_body do %>
          <%= render Railsboot::TableComponent.new do |table| %>
            <% table.with_head do |head| %>
              <% head.with_row do |row| %>
                <% row.with_cell(tag: "th") { "Name" } %>
                <% row.with_cell(tag: "th") { "Status" } %>
                <% row.with_cell(tag: "th") { "Twitter" } %>
                <% row.with_cell(tag: "th") { "Last Login" } %>
              <% end %>
            <% end %>
            <% table.with_body do |body| %>
              <% customers.each do |customer| %>
                <% body.with_row do |row| %>
                  <% row.with_cell { link_to customer.name, "#" } %>
                  <% row.with_cell do %>
                    <% if customer.active %>
                      <%= render Railsboot::BadgeComponent.new(color: "success").with_content("active") %>
                    <% else %>
                      <%= render Railsboot::BadgeComponent.new(color: "danger").with_content("inactive") %>
                    <% end %>
                  <% end %>
                  <% row.with_cell { link_to("@" + customer.twitter_handle, "https://twitter.com/#{customer.twitter_handle}") } %>
                  <% row.with_cell { tag.code l(customer.last_login_at.to_date, format: :long) } %>
                <% end %>
              <% end %>
            <% end %>
          <% end %>
          <%= render Railsboot::PaginationComponent.new(pagy: Pagy.new(count: 50, page: 1)) %>
        <% end %>
      <% end %>
    </div>

    <div class="col-sm-12 col-md-4 mt-4 mt-md-0">
      <%= render Railsboot::CardComponent.new do |card| %>
        <% card.with_header.with_content("Search") %>
        <% card.with_body do %>
          <%= form_tag nil, method: :get do %>
            <div class="mt-1">
              <%= label_tag :text, "Fulltext", class: "form-label" %>
              <%= text_field_tag :text, params[:text], placeholder: "Name, Email, etc.", class: "form-control", autocomplete: "off" %>
            </div>
            <div class="mt-3">
              <%= submit_tag "Search", name: nil, class: "btn btn-outline-secondary" %>
            </div>
          <% end %>
        <% end %>
      <% end %>
    </div>
  </div>
</div>

<div class="bg-light p-4">
  <div class="bg-white m-sm-auto w-100 border rounded p-4" style="max-width: 400px">
    <%= render Railsboot::HeadingComponent.new(size: "h2").with_content("Welcome") %>

    <p class="fw-light">Log in to your account</p>

    <%= render Railsboot::Button::LinkComponent.new(variant: "secondary", outline: true, class: "mt-5 d-grid d-flex align-items-center justify-content-center") do %>
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-google" viewBox="0 0 16 16">
        <path d="M15.545 6.558a9.4 9.4 0 0 1 .139 1.626c0 2.434-.87 4.492-2.384 5.885h.002C11.978 15.292 10.158 16 8 16A8 8 0 1 1 8 0a7.7 7.7 0 0 1 5.352 2.082l-2.284 2.284A4.35 4.35 0 0 0 8 3.166c-2.087 0-3.86 1.408-4.492 3.304a4.8 4.8 0 0 0 0 3.063h.003c.635 1.893 2.405 3.301 4.492 3.301 1.078 0 2.004-.276 2.722-.764h-.003a3.7 3.7 0 0 0 1.599-2.431H8v-3.08z" />
      </svg>
      <span class="ps-2">Login with Google</span>
    <% end %>

    <%= render Railsboot::DividerComponent.new(color: "black-50", class: "mt-5 mb-5") do %>
      <span class="position-absolute top-50 start-50 translate-middle text-black-50 bg-body px-2">OR</span>
    <% end %>

    <%= form_with(url: "#") do |form| %>
      <%= render Railsboot::FormFieldComponent.new(form: form) do |field| %>
        <% field.with_label(for: :email, class: "fw-semibold") { "Email" } %>
        <% field.with_email_field(name: :email, required: true) %>
      <% end %>

      <%= render Railsboot::FormFieldComponent.new(form: form, class: "mt-4") do |field| %>
        <% field.with_label(for: :password_challenge, class: "fw-semibold") { "Password" } %>
        <% field.with_password_field(name: :password_challenge, required: true, autocomplete: "current-password") %>
        <%= link_to tag.small("Forgot Password"), nil, class: "mt-1 d-block" %>
      <% end %>

      <%= render Railsboot::FormFieldComponent.new(form: form, class: "mt-4 d-grid") do |field| %>
        <%= render Railsboot::Button::InputComponent.new(form: form, text: "Login") %>
      <% end %>

      <p class="mt-4 fw-light">
        Already have an account? <%= link_to "Sign up", "#" %>
      </p>
    <% end %>
  </div>
</div>

<div class="bg-light p-4">
  <div class="bg-white m-sm-auto w-100 p-3 border rounded p-4" style="max-width: 400px">
    <%= render Railsboot::HeadingComponent.new(size: "h2").with_content("Password Reset") %>

    <p class="fw-light">Enter your email address below and we will send you password reset instructions.</p>

    <%= form_with(url: "#") do |form| %>
      <%= render Railsboot::FormFieldComponent.new(form: form) do |field| %>
        <% field.with_label(for: :email, class: "fw-semibold") { "Email" } %>
        <% field.with_email_field(name: :email, required: true) %>
      <% end %>

      <%= render Railsboot::FormFieldComponent.new(form: form, class: "mt-4 d-grid") do |field| %>
        <%= render Railsboot::Button::InputComponent.new(form: form, text: "Reset Password") %>
      <% end %>
    <% end %>

    <p class="mt-4 fw-light">
      <%= link_to "Back to Login", "#" %>
    </p>
  </div>
</div>