Circular Gallery

1'use client';
2 
3import * as React from 'react';
4import { cn } from '@/lib/utils';
5import './circular-gallery.css';
6 
7export interface CircularGalleryItemProps {
8  id: string;
9  imageSrc: string;
10  title: string;
11}
12 
13export interface CircularGalleryProps extends Omit<
14  React.HTMLAttributes<HTMLElement>,
15  'title'
16> {
17  items: CircularGalleryItemProps[];
18  title?: React.ReactNode;
19  radius?: string;
20}
21 
22export const CircularGallery = React.forwardRef<
23  HTMLElement,
24  CircularGalleryProps
25>(({ className, items, title, radius = '40vmin', ...props }, ref) => {
26  return (
27    <section
28      ref={ref}
29      className={cn('circular-gallery-wrapper', className)}
30      style={
31        {
32          '--cards': items.length,
33          '--radius': radius,
34        } as React.CSSProperties
35      }
36      {...props}
37    >
38      {items.map((item, index) => (
39        <div
40          key={item.id}
41          id={item.id}
42          data-title={item.title}
43          style={
44            {
45              '--i': index + 1,
46              '--bg-img': `url(${item.imageSrc})`,
47            } as React.CSSProperties
48          }
49        >
50          <a href={`#${item.id}`}>
51            {/* eslint-disable-next-line @next/next/no-img-element */}
52            <img src={item.imageSrc} alt={item.title} />
53          </a>
54        </div>
55      ))}
56      {title && <h1>{title}</h1>}
57    </section>
58  );
59});
60CircularGallery.displayName = 'CircularGallery';