refactor: extract components from EquipmentTab.tsx to reduce below 400 lines

2026-05-01 15:46:11 +02:00
parent 6c4ebd8b8e
commit 86683fe288
5 changed files with 662 additions and 334 deletions
@@ -0,0 +1,76 @@
+'use client';
+
+import { EquipmentSlot } from '@/lib/game/data/equipment';
+import type { GameStore } from '@/lib/game/types';
+import { ActionButton } from '@/components/ui/action-button';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import { X } from 'lucide-react';
+
+interface EquipmentControlsProps {
+  store: GameStore;
+  onUnequip: (slot: EquipmentSlot) => void;
+  onDelete: (instanceId: string, name: string) => void;
+  selectedSlot: EquipmentSlot | null;
+  isSlotBlocked: (slot: EquipmentSlot) => boolean;
+  isEquipped: (instanceId: string) => boolean;
+  getEquippableSlots: (typeId: string) => EquipmentSlot[];
+}
+
+export function EquipmentControls({
+  store,
+  onUnequip,
+  onDelete,
+  selectedSlot,
+  isSlotBlocked,
+  isEquipped,
+  getEquippableSlots,
+}: EquipmentControlsProps) {
+  const SLOT_NAMES = {
+    mainHand: 'Main Hand',
+    offHand: 'Off Hand',
+    head: 'Head',
+    body: 'Body',
+    hands: 'Hands',
+    feet: 'Feet',
+    accessory1: 'Accessory 1',
+    accessory2: 'Accessory 2',
+  } as const;
+
+  return {
+    renderUnequipButton: (slot: EquipmentSlot, instanceName: string) => (
+      <ActionButton
+        variant="ghost"
+        size="sm"
+        className="h-6 w-6 p-0 text-[var(--color-danger)] hover:text-[var(--interactive-danger-hover)] hover:bg-[var(--interactive-danger)]/20"
+        onClick={(e) => {
+          e.stopPropagation();
+          onUnequip(slot);
+        }}
+        aria-label={`Unequip ${instanceName}`}
+      >
+        <X size={14} />
+      </ActionButton>
+    ),
+
+    renderDeleteButton: (instanceId: string, name: string) => (
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <ActionButton
+              variant="ghost"
+              size="sm"
+              className="h-8 w-8 p-0 text-[var(--color-danger)] hover:text-[var(--interactive-danger-hover)] hover:bg-[var(--interactive-danger)]/20"
+              onClick={() => onDelete(instanceId, name)}
+              aria-label={`Delete ${name}`}
+            >
+              <X size={14} />
+            </ActionButton>
+          </TooltipTrigger>
+          <TooltipContent className="bg-[var(--bg-elevated)] border-[var(--border-default)] text-[var(--text-primary)]">
+            <p>Delete this item</p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    ),
+  };
+}