Getting Started

npm install masonix

import { Masonry } from 'masonix';

type Task = {
  id: string;
  title: string;
  detail: string;
  area: string;
  status: string;
  accent: string;
};

function TaskCard({ task }: { task: Task }) {
  return (
    <article className="relative overflow-hidden rounded-xl border bg-white p-4 shadow-sm">
      <div
        className="absolute inset-y-0 left-0 w-1"
        style={{ background: task.accent }}
      />
      <div className="flex items-center justify-between gap-3 pl-2">
        <span className="text-xs font-medium text-zinc-500">{task.area}</span>
        <span className="rounded-full bg-zinc-100 px-2 py-1 text-xs">
          {task.status}
        </span>
      </div>
      <div className="pl-2 pt-2">
        <h3 className="text-sm font-semibold">{task.title}</h3>
        <p className="mt-2 text-sm leading-6 text-zinc-500">{task.detail}</p>
      </div>
    </article>
  );
}

export function TaskGrid({ tasks }: { tasks: Task[] }) {
  return (
    <Masonry
      items={tasks}
      columnWidth={190}
      maxColumns={3}
      gap={14}
      itemKey={(task) => task.id}
      render={({ data }) => <TaskCard task={data} />}
    />
  );
}