Masonry

import { Masonry } from "@/components/ui/masonry";

export default function Example() {
  return <Masonry />;
}

import { forwardRef } from "react";
import { cn } from "@/lib/utils";

const Masonry = forwardRef(({ className, columns = 3, gap = 4, children, ...props }, ref) => (
  <div
    ref={ref}
    className={cn(
      gap === 2 && "[column-gap:0.5rem]",
      gap === 4 && "[column-gap:1rem]",
      gap === 6 && "[column-gap:1.5rem]",
      gap === 8 && "[column-gap:2rem]",
      columns === 2 && "[column-count:2]",
      columns === 3 && "[column-count:3]",
      columns === 4 && "[column-count:4]",
      className
    )}
    {...props}
  >
    {Array.isArray(children)
      ? children.map((child, i) => (
          <div key={i} className="mb-4 break-inside-avoid">{child}</div>
        ))
      : children}
  </div>
));
Masonry.displayName = "Masonry";

export { Masonry };