@djangocfg/ui-tools 2.1.118 → 2.1.120

package/src/tools/Gallery/components/GalleryCompact.tsx

@@ -1,173 +0,0 @@
-'use client'
-
-import { memo, useCallback, useEffect, useState } from 'react'
-import { cn } from '@djangocfg/ui-core/lib'
-import {
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  type CarouselApi,
-} from '@djangocfg/ui-core/components'
-import { ImageOff } from 'lucide-react'
-import { GalleryMedia } from './GalleryMedia'
-import type { GalleryMediaItem } from '../types'
-
-export interface GalleryCompactProps {
-  /** Array of images to display */
-  images: GalleryMediaItem[]
-  /** Show dots indicator (default: true) */
-  showDots?: boolean
-  /** Max dots to show (default: 5) */
-  maxDots?: number
-  /** Show counter badge (default: false) */
-  showCounter?: boolean
-  /** On image click callback */
-  onClick?: () => void
-  /** Additional CSS class */
-  className?: string
-}
-
-/**
- * GalleryCompact - Minimal carousel for property cards
- *
- * Features:
- * - Simple swipe carousel
- * - Dots indicator (mobile-style)
- * - No arrows, thumbnails, or lightbox
- * - Fills parent container
- * - Stops event propagation on navigation
- */
-export const GalleryCompact = memo(function GalleryCompact({
-  images,
-  showDots = true,
-  maxDots = 5,
-  showCounter = false,
-  onClick,
-  className,
-}: GalleryCompactProps) {
-  const [api, setApi] = useState<CarouselApi>()
-  const [currentIndex, setCurrentIndex] = useState(0)
-
-  const total = images.length
-  const hasMultiple = total > 1
-
-  // Listen to carousel changes
-  useEffect(() => {
-    if (!api) return
-
-    const onSelect = () => {
-      setCurrentIndex(api.selectedScrollSnap())
-    }
-
-    api.on('select', onSelect)
-    return () => {
-      api.off('select', onSelect)
-    }
-  }, [api])
-
-  // Dot click handler - stops propagation to prevent card click
-  const handleDotClick = useCallback(
-    (e: React.MouseEvent, index: number) => {
-      e.preventDefault()
-      e.stopPropagation()
-      api?.scrollTo(index)
-    },
-    [api]
-  )
-
-  // Handle container click
-  const handleClick = useCallback(
-    (e: React.MouseEvent) => {
-      // Don't trigger if clicking on dots
-      if ((e.target as HTMLElement).closest('[data-dots]')) {
-        return
-      }
-      onClick?.()
-    },
-    [onClick]
-  )
-
-  // Empty state
-  if (total === 0) {
-    return (
-      <div className={cn('relative w-full h-full bg-muted flex items-center justify-center', className)}>
-        <ImageOff className="w-8 h-8 text-muted-foreground/50" />
-      </div>
-    )
-  }
-
-  // Single image - no carousel needed
-  if (!hasMultiple) {
-    return (
-      <div className={cn('relative w-full h-full', className)} onClick={onClick}>
-        <GalleryMedia
-          media={images[0]}
-          className="w-full h-full"
-          priority
-        />
-      </div>
-    )
-  }
-
-  // Calculate visible dots
-  const visibleDots = images.slice(0, maxDots).map((_, i) => i)
-  const remainingCount = total > maxDots ? total - maxDots : 0
-
-  return (
-    <div className={cn('relative w-full h-full', className)} onClick={handleClick}>
-      <Carousel
-        setApi={setApi}
-        opts={{
-          loop: true,
-        }}
-        className="w-full h-full"
-      >
-        <CarouselContent className="-ml-0 h-full">
-          {images.map((image, index) => (
-            <CarouselItem key={image.id} className="pl-0 h-full">
-              <GalleryMedia
-                media={image}
-                className="w-full h-full"
-                priority={index === 0}
-              />
-            </CarouselItem>
-          ))}
-        </CarouselContent>
-      </Carousel>
-
-      {/* Dots indicator */}
-      {showDots && (
-        <div
-          data-dots
-          className="absolute bottom-3 left-1/2 -translate-x-1/2 flex items-center gap-1.5 z-10"
-          onClick={(e) => e.stopPropagation()}
-        >
-          {visibleDots.map((index) => (
-            <button
-              key={index}
-              type="button"
-              className={cn(
-                'rounded-full transition-all',
-                index === currentIndex
-                  ? 'w-2 h-2 bg-white shadow-[0_0_4px_rgba(255,255,255,0.8)]'
-                  : 'w-1.5 h-1.5 bg-white/50 hover:bg-white/70'
-              )}
-              onClick={(e) => handleDotClick(e, index)}
-              aria-label={`Go to image ${index + 1}`}
-            />
-          ))}
-          {remainingCount > 0 && (
-            <span className="text-white/70 text-[10px] ml-0.5">+{remainingCount}</span>
-          )}
-        </div>
-      )}
-
-      {/* Counter badge */}
-      {showCounter && (
-        <div className="absolute bottom-3 right-3 z-10 bg-black/60 backdrop-blur-sm text-white text-xs px-2 py-1 rounded-full">
-          {currentIndex + 1} / {total}
-        </div>
-      )}
-    </div>
-  )
-})