BMI Calculator with react

What are you most proud of, and what would you do differently next time?

i started testing with Vitest, i checked if the BMI calculation works correctly and if the app is visible

What challenges did you encounter, and how did you overcome them?

i dindn't find another solution to position the cards properly, so i divided them into rows and added a dynamic margin based on the row:

<div className="top-0 right-0 hidden xl:absolute xl:flex xl:flex-col xl:space-y-8">
  {chunkCards(cards).map((row, index) => (
    <div
      key={index}
      className="flex flex-1 justify-end gap-8"
      style={{
        marginRight: `${row.rowNumber % 2 === 0 ? 0 : row.rowNumber * 4}rem`,
      }}
    >
      {row.cards.map((card, index) => (
        <LimitationCard
          key={index}
          title={card.title}
          description={card.description}
          icon={card.icon}
        />
      ))}
    </div>
  ))}
</div>

function to split cards into rows:

function chunkCards(cards: CardProps[]): { cards: CardProps[]; rowNumber: number }[] {
  const rows: { cards: CardProps[]; rowNumber: number }[] = [];
  let index = 0;
  let rowNumber = 1;
  for (let rowSize = 1; index < cards.length; rowSize++) {
    rows.push({
      cards: cards.slice(index, index + rowSize),
      rowNumber: rowNumber,
    });
    index += rowSize;
    rowNumber++;
  }
  return rows;
}