Refactor large files into modular components

- Refactored page.tsx (613→252 lines) with GameOverScreen and LeftPanel extracted - Refactored StatsTab.tsx (584→92 lines) with section components - Refactored SkillsTab.tsx (434→54 lines) with sub-components - Created modular structure for GameContext, LootInventory, and other components - All extracted components organized into feature directories
2026-05-02 17:35:03 +02:00
parent c9ae2576f4
commit d2d28887b1
194 changed files with 16862 additions and 15729 deletions
@@ -0,0 +1,69 @@
+'use client';
+
+import { GameCard } from '@/components/ui/game-card';
+import { SectionHeader } from '@/components/ui/section-header';
+import { ActionButton } from '@/components/ui/action-button';
+import { Trash2 } from 'lucide-react';
+import { EQUIPMENT_TYPES } from '@/lib/game/data/equipment';
+import type { SavedDesignsProps } from './types';
+
+export function SavedDesigns({
+  enchantmentDesigns,
+  selectedDesign,
+  setSelectedDesign,
+  deleteDesign,
+}: SavedDesignsProps) {
+  return (
+    <GameCard variant="default" className="lg:col-span-2">
+      <SectionHeader title={`Saved Designs (${enchantmentDesigns.length})`} />
+      {enchantmentDesigns.length === 0 ? (
+        <div className="text-center text-[var(--text-muted)] py-4">
+          No saved designs yet
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
+          {enchantmentDesigns.map(design => (
+            <div
+              key={design.id}
+              className={`p-3 rounded border cursor-pointer transition-all
+                ${selectedDesign === design.id
+                  ? 'border-[var(--mana-light)] bg-[var(--mana-light)]/10'
+                  : 'border-[var(--border-default)] bg-[var(--bg-sunken)]/50 hover:border-[var(--border-default)]'
+                }`}
+              onClick={() => setSelectedDesign(design.id)}
+              role="button"
+              tabIndex={0}
+              aria-label={`Select design: ${design.name}`}
+            >
+              <div className="flex justify-between items-start">
+                <div>
+                  <div className="font-semibold text-[var(--text-primary)]">{design.name}</div>
+                  <div className="text-xs text-[var(--text-muted)]">
+                    {EQUIPMENT_TYPES[design.equipmentType]?.name}
+                  </div>
+                </div>
+                <ActionButton
+                  size="sm"
+                  variant="ghost"
+                  className="h-6 w-6 p-0 text-[var(--text-muted)] hover:text-[var(--color-danger)]"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    deleteDesign(design.id);
+                  }}
+                  aria-label={`Delete design: ${design.name}`}
+                >
+                  <Trash2 className="w-4 h-4" />
+                </ActionButton>
+              </div>
+              <div className="mt-2 text-xs text-[var(--text-muted)]">
+                {design.effects.length} effects | {design.totalCapacityUsed} cap
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </GameCard>
+  );
+}
+
+SavedDesigns.displayName = 'SavedDesigns';