Enlarge Gallery

1'use client';
2 
3import React, { useState, useCallback } from 'react';
4import { ChevronLeft, ChevronRight } from 'lucide-react';
5import { cn } from '@/lib/utils';
6import './enlarge-gallery.css';
7 
8export interface EnlargeGalleryItem {
9  id: string | number;
10  src: string;
11  alt?: string;
12  title: string;
13  description?: string;
14}
15 
16export interface EnlargeGalleryProps extends React.HTMLAttributes<HTMLDivElement> {
17  items: EnlargeGalleryItem[];
18}
19 
20export const EnlargeGallery = React.forwardRef<
21  HTMLDivElement,
22  EnlargeGalleryProps
23>(({ className, items, ...props }, ref) => {
24  const [activeIndex, setActiveIndex] = useState(0);
25 
26  // The thumbnail strip as a queue of item ids, left to right; the active
27  // item is excluded. Every change removes the incoming item from the queue
28  // and pushes the outgoing item onto the end.
29  const [thumbOrder, setThumbOrder] = useState<(string | number)[]>(() =>
30    items.slice(1).map((item) => item.id)
31  );
32 
33  const goToIndex = useCallback(
34    (newIndex: number) => {
35      setActiveIndex((oldIndex) => {
36        if (oldIndex === newIndex) return oldIndex;
37 
38        setThumbOrder((order) => [
39          ...order.filter((id) => id !== items[newIndex].id),
40          items[oldIndex].id,
41        ]);
42 
43        return newIndex;
44      });
45    },
46    [items]
47  );
48 
49  if (!items || items.length === 0) return null;
50 
51  const activeItem = items[activeIndex];
52  const total = items.length;
53 
54  const indexOfId = (id: string | number) =>
55    items.findIndex((i) => i.id === id);
56 
57  return (
58    <div
59      ref={ref}
60      className={cn('enlarge-gallery-root font-sans', className)}
61      {...props}
62    >
63      <div className='enlarge-gallery-gallery relative h-full w-full'>
64        {/* Slides / Track */}
65        <div className='enlarge-gallery-track absolute inset-0 h-full w-full'>
66          {items.map((item, index) => {
67            const active = index === activeIndex;
68            const offset = active
69              ? 0
70              : thumbOrder.indexOf(item.id) - (thumbOrder.length - 1) / 2;
71 
72            return (
73              <div
74                key={item.id}
75                className='enlarge-gallery-item'
76                data-active={String(active)}
77              >
78                <div
79                  className='enlarge-gallery-slide'
80                  style={{ '--offset': offset } as React.CSSProperties}
81                >
82                  {/* eslint-disable-next-line @next/next/no-img-element */}
83                  <img
84// … truncated