1
npm i framer-motion tailwindcss-animate

1
'use client';
2
        
3
import React, { useState } from 'react';
4
import { motion } from 'framer-motion';
5
import Image from 'next/image';
6

7
interface MasonryGridProps {
8
  items: { image: string; title: string; description: string }[];
9
  columns?: number | undefined;
10
}
11

12
const MasonryGrid: React.FC<MasonryGridProps> = ({ items, columns = undefined }) => {
13
  const [imagesLoaded, setImagesLoaded] = useState<{ [key: string]: boolean }>({});
14

15
  if (!items || items.length === 0) {
16
    return <div className="text-center p-4">No items to display</div>;
17
  }
18

19
  return (
20
    <div
21
      style={{
22
        columns: columns
23
      }}
24
      className={`${
25
        !columns && 'columns-1 sm:columns-2 md:columns-3 lg:columns-4'
26
      } gap-2 overflow-y-auto p-3 w-full`}
27
    >
28
      {items.map((item, index) => {
29
        // Calculate row number based on screen size and index
30
        const getColumnCount = () => {
31
          if (typeof window === 'undefined') return 1;
32
          const width = window.innerWidth;
33
          if (width >= 1024) return 4; // lg
34
          if (width >= 768) return 3; // md
35
          if (width >= 640) return 2; // sm
36
          return 1;
37
        };
38

39
        const columnCount = getColumnCount();
40
        const rowIndex = Math.floor(index / columnCount);
41

42
        return (
43
          <motion.div
44
            key={index}
45
            className="break-inside-avoid mb-4 relative group rounded-xl overflow-hidden p-1 border-[1px] border-transparent hover:border-[1px] hover:border-neutral-800"
46
            initial={{ opacity: 0, y: 20 }}
47
            animate={{
48
              opacity: 1,
49
              y: 0,
50
              transition: {
51
                duration: 0.5,
52
                delay: rowIndex * 0.1,
53
                ease: 'easeOut'
54
              }
55
            }}
56
            whileHover={{ scale: 1.05, rotateZ: 1 }}
57
          >
58
            <div className="relative">
59
              <div className="relative w-full flex gap-1 flex-col items-start justify-start">
60
                {!imagesLoaded[item.image] && (
61
                  <div className="absolute inset-0 w-full h-[300px] bg-neutral-500/50 animate-pulse rounded-lg" />
62
                )}
63
                <Image
64
                  src={item.image}
65
                  alt={item.title}
66
                  width={400}
67
                  height={300}
68
                  className={`${
69
                    !imagesLoaded[item.image] ? 'opacity-0' : 'opacity-100'
70
                  } w-full h-auto transition-transform duration-300 rounded-lg`}
71
                  sizes="(max-width: 640px) 100vw, (max-width: 768px) 50vw, (max-width: 1024px) 33vw, 25vw"
72
                  onLoad={() => {
73
                    setImagesLoaded((prev) => ({ ...prev, [item.image]: true }));
74
                  }}
75
                  onError={() => {
76
                    console.error(`Error loading image: ${item.image}`);
77
                    setImagesLoaded((prev) => ({ ...prev, [item.image]: true }));
78
                  }}
79
                />
80
                {imagesLoaded[item.image] && (
81
                  <div className="w-full">
82
                    <h3 className="text-sm font-medium">{item.title}</h3>
83
                    <p className="mt-0 text-xs text-neutral-500 line-clamp-2 overflow-hidden">
84
                      {item.description}
85
                    </p>
86
                  </div>
87
                )}
88
              </div>
89
            </div>
90
          </motion.div>
91
        );
92
      })}
93
    </div>
94
  );
95
};
96

97
export default MasonryGrid;