#Masonry

import { Card, Masonry } from '@ifhover/leaf-ui';

export function MasonryBasic() {
  return (
    <Masonry columns={{ xs: 1, sm: 2, lg: 3 }} gap={16}>
      {[100, 160, 120, 180, 110, 140].map((height, index) => (
        <Card key={height} title={`Idea ${index + 1}`}>
          <div style={{ height }}>Cards of different heights</div>
        </Card>
      ))}
    </Masonry>
  );
}

import { Image, Masonry } from '@ifhover/leaf-ui';

import { withBase } from '@rspress/core/runtime';

export function MasonryImages() {
  return (
    <Masonry columns={{ xs: 1, sm: 2 }}>
      {[1, 2, 3].map((index) => (
        <Image
          key={index}
          src={withBase(`/media/landscape-${index}.svg`)}
          alt={`Landscape ${index}`}
          width="100%"
          height={index === 2 ? 220 : 150}
        />
      ))}
    </Masonry>
  );
}