Masonry

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

const data = [
  { id: 1, image: 'https://picsum.photos/id/10/200/300', height: 400 },
  { id: 2, image: 'https://picsum.photos/id/14/200/300', height: 300 },
  { id: 3, image: 'https://picsum.photos/id/15/200/300', height: 300 },
  { id: 4, image: 'https://picsum.photos/id/16/200/300', height: 300 },
  { id: 5, image: 'https://picsum.photos/id/17/200/300', height: 300 },
  { id: 6, image: 'https://picsum.photos/id/19/200/300', height: 300 },
  { id: 7, image: 'https://picsum.photos/id/37/200/300', height: 200 },
  { id: 8, image: 'https://picsum.photos/id/39/200/300', height: 300 },
  { id: 9, image: 'https://picsum.photos/id/85/200/300', height: 200 },
  { id: 10, image: 'https://picsum.photos/id/103/200/300', height: 400 },
  { id: 11, image: 'https://picsum.photos/id/105/200/300', height: 250 },
  { id: 12, image: 'https://picsum.photos/id/107/200/300', height: 350 },
  { id: 13, image: 'https://picsum.photos/id/108/200/300', height: 420 },
  { id: 14, image: 'https://picsum.photos/id/110/200/300', height: 280 },
  { id: 15, image: 'https://picsum.photos/id/111/200/300', height: 310 },
];

const DemoOne = () => {
  return (
    <div className="flex w-full h-screen justify-center items-center p-4 bg-gray-50 dark:bg-gray-950">
      <div className="w-full max-w-screen-xl mx-auto h-[80vh] overflow-auto border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg bg-white dark:bg-gray-900 p-4">
        <Component data={data} />
      </div>
    </div>
  );
};

export { DemoOne };