import { Masonry } from 'react-masonry'
import { pick, randomColor } from './random'

export default function DifferentHeights() {
  const numberOfBoxes = 16

  return (
    <Masonry>
      {Array.from({ length: numberOfBoxes }).map((_, index) => (
        <div
          key={index}
          style={{
            width: '25%',
            height: pick([100, 130, 180, 200, 260, 80]),
            backgroundColor: randomColor(),
          }}
        >
          {index}
        </div>
      ))}
    </Masonry>
  )
}

import type { CSSProperties } from 'react'
import { Masonry } from 'react-masonry'
import { pick, randomColor } from './random'

export default function DifferentHeights() {
  const height = 160

  const boxes: CSSProperties[] = [
    { width: '20%', background: randomColor(), height },
    { width: '30%', background: randomColor(), height },
    { width: '50%', background: randomColor(), height },
    // second row
    { width: '30%', background: randomColor(), height },
    { width: '40%', background: randomColor(), height },
    { width: '30%', background: randomColor(), height },
    // third row
    { width: '30%', background: randomColor(), height },
    { width: '30%', background: randomColor(), height },
    { width: '40%', background: randomColor(), height },
    // forth
    { width: '25%', background: randomColor(), height },
    { width: '25%', background: randomColor(), height },
    { width: '25%', background: randomColor(), height },
    { width: '25%', background: randomColor(), height },
  ]

  return (
    <Masonry>
      {boxes.map((box, index) => (
        <div style={box}>{index}</div>
      ))}
    </Masonry>
  )
}

import type { CSSProperties } from 'react'
import { Masonry } from 'react-masonry'
import { pick, randomColor } from './random'

export default function DifferentHeights() {
  const boxes: CSSProperties[] = [
    {
      width: `20%`,
      height: 100,
      background: randomColor(),
    },
    {
      width: `30%`,
      height: 160,
      background: randomColor(),
    },
    {
      width: `50%`,
      height: 120,
      background: randomColor(),
    },
    {
      width: `20%`,
      height: 60,
      background: randomColor(),
    },
    {
      width: `35%`,
      height: 130,
      background: randomColor(),
    },
    {
      width: `15%`,
      height: 100,
      background: randomColor(),
    },
    {
      width: `25%`,
      height: 100,
      background: randomColor(),
    },
    {
      width: `25%`,
      height: 120,
      background: randomColor(),
    },
  ]

  return (
    <Masonry>
      {boxes.map((box, index) => (
        <div style={box}>{index}</div>
      ))}
    </Masonry>
  )
}