<%= pb_rails("timeline", props: {orientation: "horizontal", show_date: true}) do %>
    <%= pb_rails("timeline/item", props: { line_style: "solid"}) do |item| %>

      <% item.date_area do %>
        <%= pb_rails("timeline/date_area") do %>
          <%= pb_rails("title", props: { text: "Any Kit Here", size: 2 }) %>
        <% end %>
      <% end %>
    
      <% item.node_area do %>
        <%= pb_rails("timeline/node_area", props: { icon: 'check', icon_color: 'teal' }) %>
      <% end %>
    
      <% item.detail_area do %>
        <%= pb_rails("title_detail", props: {
          title: "Jackson Heights",
          detail: "37-27 74th Street"
        }) %>
      <% end %>
    <% end %>
    <%= pb_rails("timeline/item", props: { line_style: "dotted"}) do |item| %>

      <% item.node_area do %>
        <%= pb_rails("timeline/node_area") do %>
          <%= pb_rails("pill", props: { text: "Any Kit" , variant: "success" }) %>
        <% end %>
      <% end %>
    
      <% item.detail_area do %>
        <%= pb_rails("title_detail", props: {
          title: "Greenpoint",
          detail: "81 Gate St Brooklyn"
        }) %>
      <% end %>
    <% end %>

    <%= pb_rails("timeline/item", props: {icon: "map-marker-alt", icon_color: "purple", date: Date.today+1 }) do |item| %>
      <%= pb_rails("title_detail", props: {
          title: "Society Hill",
          detail: "72 E St Astoria"
      }) %>
    <% end %>
<% end %>