Grid

render NitroKit::Container.new(size: :xl) do
  render NitroKit::Grid.new(
    cols: "1 sm:2 lg:3",
    gap: "3 md:4 lg:6",
    id: "gallery-grid-cards"
  ) do
    Gallery::Data.plans.each do |plan|
      render NitroKit::Card.new(id: "gallery-grid-card-#{plan.id}") do |card|
        card.title(plan.name, level: 4)
        card.description(plan.features.to_sentence)
        card.footer do
          card.actions do
            render NitroKit::Button.new(
              plan.current ? "Manage" : "Choose",
              variant: plan.current ? :default : :primary,
              size: :sm
            )
          end
        end
      end
    end
  end
end

render NitroKit::Grid.new(
  cols: "1 sm:2 md:3 lg:4 xl:6 2xl:12",
  gap: "1 sm:2 md:3 lg:4 xl:6 2xl:8",
  id: "gallery-grid-breakpoints"
) do
  12.times do |index|
    render NitroKit::Badge.new(
      "Track #{index + 1}",
      id: "gallery-grid-breakpoint-#{index + 1}",
      variant: :outline
    )
  end
end

[ 1, 2, 3, 4, 6, 12 ].each do |cols|
  sample("#{cols} #{'column'.pluralize(cols)}", slug: "cols-#{cols}") do
    render NitroKit::Grid.new(cols:, gap: 1, id: "gallery-grid-cols-#{cols}") do
      cols.times do |index|
        render NitroKit::Badge.new(
          "#{index + 1}",
          id: "gallery-grid-cols-#{cols}-#{index + 1}",
          color: :info
        )
      end
    end
  end
end

sample("Catalog", slug: "catalog") do
  render NitroKit::Grid.new(
    cols: "1 md:2 xl:4",
    gap: "2 lg:6",
    id: "gallery-grid-catalog"
  ) do
    8.times do |index|
      render NitroKit::Card.new(id: "gallery-grid-catalog-#{index + 1}", size: :sm) do |card|
        card.title("Integration #{index + 1}", level: 4)
        card.description("A roomy card collection gains columns gradually.")
      end
    end
  end
end

sample("Metrics", slug: "metrics") do
  render NitroKit::Grid.new(
    cols: "2 lg:4 2xl:6",
    gap: "2 md:3",
    id: "gallery-grid-metrics"
  ) do
    12.times do |index|
      render NitroKit::Card.new(id: "gallery-grid-metric-#{index + 1}", size: :sm) do |card|
        card.title("Region #{index + 1}", level: 4)
        card.description("#{(index + 1) * 128_430} requests")
      end
    end
  end
end

sample("Empty", slug: "empty") do
  render NitroKit::Grid.new(cols: "1 md:3", gap: 4, id: "gallery-grid-empty")
end
sample("One", slug: "one") do
  render NitroKit::Grid.new(cols: "1 md:3", gap: 4, id: "gallery-grid-one") do
    render NitroKit::Card.new do |card|
      card.body("One item occupies one track; Grid does not invent a span API.")
    end
  end
end
sample("Many", slug: "many") do
  render NitroKit::Grid.new(cols: "1 sm:2 lg:3", gap: 2, id: "gallery-grid-many") do
    9.times do |index|
      render NitroKit::Card.new(size: :sm) do |card|
        card.title("Record #{index + 1}", level: 4)
        card.description("Deterministic collection item")
      end
    end
  end
end

render NitroKit::Grid.new(
  cols: "1 sm:2 lg:3",
  gap: "3 lg:6",
  id: "gallery-grid-team"
) do
  Gallery::Data.members.each do |member|
    render NitroKit::Card.new(id: "gallery-grid-team-#{member.id}") do |card|
      card.header do
        card.title(member.name, level: 4)
        card.description do
          plain member.email
          if member == Gallery::Data.members.first
            br
            plain "International Research, Production, and Reliability Engineering"
          end
        end
        card.actions do
          render NitroKit::Badge.new(
            member.status.to_s.humanize,
            color: member.status == :active ? :success : :info,
            size: :sm
          )
        end
      end
      card.divider
      card.footer do
        card.actions do
          render NitroKit::Button.new("View", size: :sm)
          render NitroKit::Button.new("Change role", size: :sm)
        end
      end
    end
  end
end

render NitroKit::Grid.new(
  cols: "1 sm:2 lg:4",
  gap: "2 lg:4",
  id: "gallery-grid-hostile-members"
) do
  Gallery::Hostile.members(40).each do |member|
    render NitroKit::Card.new(id: "gallery-grid-hostile-member-#{member.id}") do |card|
      card.title(member.name, level: 4)
      card.body do
        render NitroKit::Badge.new(
          member.role.to_s.humanize,
          id: "gallery-grid-hostile-member-#{member.id}-role",
          size: :sm
        )
        p { member.email }
      end
    end
  end
end

render NitroKit::Grid.new(cols: 12, gap: 1, id: "gallery-grid-hostile-tracks") do
  Gallery::Hostile::BADGE_LABELS.each_with_index do |label, index|
    render NitroKit::Badge.new(
      label,
      id: "gallery-grid-hostile-track-#{index}",
      color: :info
    )
  end
end