Masonry

"use client";import { Masonry } from "@/ui";const cards = [  { title: "Sunrise", height: "h-24", tone: "bg-primary/10" },  { title: "Mountains", height: "h-44", tone: "bg-accent/20" },  { title: "Ocean", height: "h-32", tone: "bg-primary/15" },  { title: "Forest", height: "h-52", tone: "bg-accent/10" },  { title: "Desert", height: "h-28", tone: "bg-primary/20" },  { title: "Canyon", height: "h-40", tone: "bg-accent/15" },  { title: "Glacier", height: "h-36", tone: "bg-primary/10" },  { title: "Volcano", height: "h-48", tone: "bg-accent/25" },  { title: "Meadow", height: "h-28", tone: "bg-primary/15" },];export default function MasonryBasicDemo() {  return (    <div className="w-full max-w-md">      <Masonry        items={cards}        columns={{ base: 2, md: 3 }}        getKey={(card) => card.title}        renderItem={(card) => (          <div className={`rounded-lg border p-3 ${card.height} ${card.tone}`}>            <p className="text-sm font-medium">{card.title}</p>          </div>        )}      />    </div>  );}

"use client";

import * as React from "react";
import { Button, Masonry, useLoadMore } from "@/ui";

interface Photo {
  id: number;
  title: string;
  height: number;
  tone: string;
}

const tones = ["bg-primary/10", "bg-accent/15", "bg-primary/20", "bg-accent/10"];

const allPhotos: Photo[] = Array.from({ length: 24 }, (_, i) => ({
  id: i + 1,
  title: `Photo ${String(i + 1).padStart(2, "0")}`,
  height: 72 + ((i * 37) % 96),
  tone: tones[i % tones.length],
}));

export default function MasonryCustomDemo() {
  const containerRef = React.useRef<HTMLDivElement>(null);
  const { visibleCount, hasMore, loadMore, sentinelRef } = useLoadMore({
    total: allPhotos.length,
    pageSize: 8,
    root: containerRef,
    rootMargin: "120px",
  });
  const visible = allPhotos.slice(0, visibleCount);

  return (
    <div className="flex w-full max-w-md flex-col gap-2">
      <div
        ref={containerRef}
        className="h-72 overflow-y-auto rounded-lg border p-2"
        tabIndex={0}
        aria-label="Photo gallery"
        data-testid="scroll-root"
      >
        <Masonry
          items={visible}
          columns={2}
          className="gap-2"
          getKey={(photo) => photo.id}
          renderItem={(photo) => (
            <figure
              className={`flex items-end rounded-md border p-2 ${photo.tone}`}
              style={{ height: photo.height }}
            >
              <span className="text-xs font-medium">{photo.title}</span>
            </figure>
          )}
        />
        {hasMore && <div ref={sentinelRef} aria-hidden className="h-px" />}
      </div>
      <div className="flex items-center justify-between gap-2">
        <p className="text-xs text-muted-foreground">
          {visibleCount} of {allPhotos.length} loaded
        </p>
        {hasMore && (
          <Button variant="outline" onClick={loadMore}>
            Load more
          </Button>
        )}
      </div>
    </div>
  );
}