Image Gallery

​

Overview

​

Import

import { DraggableImageItem } from "../components/DraggableImageItem";

​

Props

​

PropertyImageMeta Type

interface PropertyImageMeta {
  id: number;
  url: string;
  orderIndex: number;
  isMain: boolean;
  rotation?: number; // 0-3 (90° steps)
}

​

Features

​

Drag and Drop

• Drag images to reorder them
• Visual feedback during drag (opacity, scale, shadow)
• Cursor changes to grab and grabbing
• Smooth transitions

​

Image Operations

​

Delete/Undelete

• Click the X button to mark for deletion
• Click again to unmark
• Visual feedback: Red background when marked
• Actual deletion happens on form submit

​

Set as Main

• Click the star button to set as main image
• Yellow badge when image is main
• Automatically moves to position 1
• Disabled when already main

​

Rotate

• Click rotate button to rotate 90° clockwise
• Smooth rotation transition (0.3s ease)
• Image fit classes adjust based on rotation
• Supports 0°, 90°, 180°, 270° rotations

​

Visual Indicators

​

Order Index Badge

• Top-left corner badge showing position
• Dark background with white text
• 1-based numbering for user clarity

​

Drag Handle

• Top-right corner grip icon
• Appears on hover (opacity transition)
• Visual indicator that item is draggable

​

Usage Examples

import { DraggableImageItem } from "../components/DraggableImageItem";
import { DndContext, closestCenter } from "@dnd-kit/core";
import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
import { useState } from "react";

function ImageGallery() {
  const [images, setImages] = useState<PropertyImageMeta[]>([
    { id: 1, url: "/img1.jpg", orderIndex: 0, isMain: true },
    { id: 2, url: "/img2.jpg", orderIndex: 1, isMain: false },
    { id: 3, url: "/img3.jpg", orderIndex: 2, isMain: false },
  ]);
  const [deletedIds, setDeletedIds] = useState<number[]>([]);
  const [rotations, setRotations] = useState<Record<number, number>>({});

  const handleDelete = (id: number) => {
    setDeletedIds((prev) =>
      prev.includes(id) ? prev.filter((i) => i !== id) : [...prev, id]
    );
  };

  const handleSetMain = (id: number) => {
    setImages((prev) => {
      const updated = prev.map((img) => ({
        ...img,
        isMain: img.id === id,
      }));
      // Move to position 1
      const mainImg = updated.find((img) => img.id === id);
      const others = updated.filter((img) => img.id !== id);
      return mainImg ? [mainImg, ...others] : updated;
    });
  };

  const handleRotate = (id: number) => {
    setRotations((prev) => ({
      ...prev,
      [id]: ((prev[id] || 0) + 1) % 4,
    }));
  };

  const getImageFitClass = (rotation: number) => {
    return rotation % 2 === 0 ? "object-cover" : "object-contain";
  };

  return (
    <DndContext collisionDetection={closestCenter}>
      <SortableContext items={images} strategy={verticalListSortingStrategy}>
        <div className="space-y-4">
          {images.map((image) => (
            <DraggableImageItem
              key={image.id}
              image={image}
              onDelete={handleDelete}
              onSetMain={handleSetMain}
              onRotate={handleRotate}
              isMarkedForDeletion={deletedIds.includes(image.id)}
              rotationAngle={(rotations[image.id] || 0) * 90}
              getImageFitClassForRotation={getImageFitClass}
            />
          ))}
        </div>
      </SortableContext>
    </DndContext>
  );
}

​

Button Controls

​

Delete Button (Top-Right)

• Default: White background, gray text
• Marked: Red background, white text

​

Main Image Button (Bottom-Left)

• Not main: White background, gray star outline
• Main: Yellow background, filled yellow star, disabled

​

Rotate Button (Bottom-Right)

​

Drag Handle (Top-Right)

​

Styling

​

Container

• Height: h-32
• Relative positioning for absolute button placement
• Group hover effects
• Dragging states (opacity 0.5, scale 1.05, shadow-lg)

​

Image Container

• Width: 80% of parent
• Height: 80% of parent
• Border and rounded corners
• Centered using flex
• Transform origin center for rotation
• Smooth rotation transition (0.3s ease)

​

Image Fit Classes

• object-cover for 0° and 180° (even rotations)
• object-contain for 90° and 270° (odd rotations)

​

Drag & Drop Setup

import { DndContext } from "@dnd-kit/core";
import { SortableContext } from "@dnd-kit/sortable";

<DndContext>
  <SortableContext items={images}>
    {/* DraggableImageItem components */}
  </SortableContext>
</DndContext>

​

Keyboard Accessibility

• Enter key to activate
• Space key to activate
• tabIndex={0} on all buttons
• Descriptive aria-label attributes

​

Aria Labels

• Delete: “Marcar para eliminar” / “Desmarcar para eliminar”
• Main: “Imagen principal (posición 1)” / “Mover a posición 1 (imagen principal)”
• Rotate: “Rotar imagen”

​

Image URL Normalization

• Relative URLs
• Absolute URLs
• CDN URLs
• Local development URLs

​

Dependencies

• @dnd-kit/sortable - Drag and drop functionality
• @dnd-kit/utilities - CSS transform utilities
• lucide-react - Icons (X, Star, RotateCw, GripVertical)
• ../utils - Image URL normalization

​

Integration Notes

​

With Form State

• Parent manages order
• Parent tracks deletions
• Parent stores rotations
• Parent handles main image selection

​

With Backend

1. Load images from API with metadata
2. User makes changes (reorder, rotate, delete, set main)
3. Track changes in parent state
4. On submit, send updated metadata to API
5. API processes deletions, rotations, and new order

​

Source Code