Tailwind Masonry Grid

grid.tsx

import * as React from "react";
import { cn } from "@/lib/utils";
import { Card } from "./card";
import { Project } from "@/lib/data";

export type GridProps = React.HTMLAttributes<HTMLElement> & {
  columns?: 1 | 2 | 3 | 4;
  projects: Project[];
  animation?: boolean;
};

export const Grid = ({
  className,
  projects,
  columns = 4,
  animation,
}: GridProps) => {
  const columnStyles = {
    1: "sm:w-full",
    2: "sm:w-1/2",
    3: "sm:w-1/2 md:w-1/3",
    4: "sm:w-1/2 md:w-1/4",
  };
  const columnClass = columnStyles[columns];

  return (
    <div
      className={cn(
        "-mx-2 flex flex-wrap p-4 sm:p-8",
        animation ? "fade-up" : "",
        className,
      )}
    >
      {Array.from({ length: columns }).map((_, columnIndex) => (
        <div
          key={columnIndex}
          className={cn("flex w-full flex-col px-2", columnClass)}
        >
          {projects
            .filter(
              (_: Project, index: number) => index % columns === columnIndex,
            )
            .map((project: Project) => (
              <Card key={project.id} project={project} />
            ))}
        </div>
      ))}
    </div>
  );
};