Function renderGrid

components/TransformationSelector.tsx:67–87

(items: Transformation[])

  };

  const renderGrid = (items: Transformation[]) => (
    <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
      {items.map((trans, index) => (
        <button
          key={trans.key}
          draggable={!activeCategory} // Only allow dragging categories
          onDragStart={(e) => !activeCategory && handleDragStart(e, index)}
          onDragEnter={(e) => !activeCategory && handleDragEnter(e, index)}
          onDragEnd={!activeCategory && handleDragEnd}
          onDragOver={!activeCategory && handleDragOver}
          onClick={() => handleItemClick(trans)}
          className={`group flex flex-col items-center justify-center text-center p-4 aspect-square bg-[var(--bg-card)] rounded-xl border border-[var(--border-primary)] hover:border-[var(--accent-primary)] transition-all duration-200 ease-in-out transform hover:-translate-y-1 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-[var(--bg-primary)] focus:ring-[var(--accent-primary)] ${
            !activeCategory ? 'cursor-grab active:cursor-grabbing' : 'cursor-pointer'
          } ${dragging && !activeCategory ? 'border-dashed' : ''}`}
        >
          <span className="text-4xl mb-2 transition-transform duration-200 group-hover:scale-110">{trans.emoji}</span>
          <span className="font-semibold text-sm text-[var(--text-primary)]">{t(trans.titleKey)}</span>
        </button>
      ))}
    </div>
  );

  return (
    <div className="container mx-auto p-4 md:p-8 animate-fade-in">