Animated Image Grid

1import * as React from 'react';
2import { cn } from '@/lib/utils';
3import './animated-image-grid.css';
4 
5import { cva, type VariantProps } from 'class-variance-authority';
6 
7const itemVariants = cva(
8  'animated-image-grid-item overflow-hidden transition-all duration-300',
9  {
10    variants: {
11      variant: {
12        default: 'rounded-lg border-2 border-primary/20 shadow-sm',
13        circle: 'rounded-full border-4 border-white shadow-md',
14        polaroid: 'rounded-sm bg-white p-2 pb-8 shadow-lg',
15        minimal: 'rounded-md shadow-none border-none',
16      },
17    },
18    defaultVariants: {
19      variant: 'default',
20    },
21  }
22);
23 
24export interface AnimatedImageGridItem {
25  id: string | number;
26  src: string;
27  alt?: string;
28}
29 
30export interface AnimatedImageGridProps
31  extends
32    React.HTMLAttributes<HTMLDivElement>,
33    VariantProps<typeof itemVariants> {
34  items: AnimatedImageGridItem[];
35  gap?: string;
36  size?: string;
37  itemClassName?: string;
38  imageClassName?: string;
39}
40 
41export const AnimatedImageGrid = React.forwardRef<
42  HTMLDivElement,
43  AnimatedImageGridProps
44>(
45  (
46    {
47      className,
48      items,
49      gap,
50      size,
51      variant,
52      itemClassName,
53      imageClassName,
54      style,
55      ...props
56    },
57    ref
58  ) => {
59    // Inject the customizable gap and size variables if provided
60    const customStyle = {
61      ...(gap ? { '--grid-gap': gap } : {}),
62      ...(size ? { '--grid-size': size } : {}),
63      ...style,
64    } as React.CSSProperties;
65 
66    return (
67      <div
68        ref={ref}
69        className={cn('animated-image-grid h-full w-full p-4', className)}
70        style={customStyle}
71        {...props}
72      >
73        {items.map((item, index) => (
74          <div
75            key={item.id}
76            className={cn(itemVariants({ variant }), itemClassName)}
77            style={{ '--index': index } as React.CSSProperties}
78          >
79            {/* eslint-disable-next-line @next/next/no-img-element */}
80            <img
81              src={item.src}
82              alt={item.alt || `Grid image ${index}`}
83              className={cn('h-full w-full object-cover', imageClassName)}
84            />
85          </div>
86        ))}
87        {/* Hidden filler element required to stretch the container height hack */}
88        <div
89          className='animated-image-grid-item animated-image-grid-filler'
90          style={{ '--index': items.length } as React.CSSProperties}
91        />
92      </div>
93    );
94  }
95);
96// … truncated