8bca8f85d5
Build and Publish Mana Loop Docker Image / build-and-publish (push) Successful in 1m28s
- Add activeCraftingSubTab state + setActiveCraftingSubTab action to craftingStore (persisted to localStorage via zustand persist middleware) - Add CraftingAttunement type to craftingStore.types and re-export from stores/index.ts barrel - Update CraftingTab.tsx to read/write active sub-tab from store instead of local useState, so selection survives component remount - Add default 'fabricator' value in craft-initial-state.ts
55 lines
1.8 KiB
TypeScript
55 lines
1.8 KiB
TypeScript
'use client';
|
|
|
|
import clsx from 'clsx';
|
|
import { Hammer, Sparkles } from 'lucide-react';
|
|
import { DebugName } from '@/components/game/debug/debug-context';
|
|
import { useCraftingStore } from '@/lib/game/stores/craftingStore';
|
|
import type { CraftingAttunement } from '@/lib/game/stores/craftingStore.types';
|
|
import { FabricatorSubTab } from './CraftingTab/FabricatorSubTab';
|
|
import { EnchanterSubTab } from './CraftingTab/EnchanterSubTab';
|
|
|
|
interface CraftingSubTab {
|
|
key: CraftingAttunement;
|
|
label: string;
|
|
icon: typeof Hammer;
|
|
}
|
|
|
|
const CRAFTING_SUB_TABS: CraftingSubTab[] = [
|
|
{ key: 'fabricator', label: 'Fabricator', icon: Hammer },
|
|
{ key: 'enchanter', label: 'Enchanter', icon: Sparkles },
|
|
];
|
|
|
|
export function CraftingTab() {
|
|
const activeSubTab = useCraftingStore((s) => s.activeCraftingSubTab);
|
|
const setActiveSubTab = useCraftingStore((s) => s.setActiveCraftingSubTab);
|
|
|
|
return (
|
|
<DebugName name="CraftingTab">
|
|
<div className="space-y-4">
|
|
{/* Sub-tab bar — same clsx pattern as DisciplinesTab */}
|
|
<div className="flex gap-2">
|
|
{CRAFTING_SUB_TABS.map(({ key, label, icon: Icon }) => (
|
|
<button
|
|
key={key}
|
|
onClick={() => setActiveSubTab(key)}
|
|
className={clsx('rounded px-3 py-1 text-sm font-medium flex items-center gap-1.5', {
|
|
'bg-amber-600 text-white': activeSubTab === key,
|
|
'text-gray-400 hover:text-gray-200': activeSubTab !== key,
|
|
})}
|
|
>
|
|
<Icon className="w-3.5 h-3.5" />
|
|
{label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* Sub-tab content */}
|
|
{activeSubTab === 'fabricator' && <FabricatorSubTab />}
|
|
{activeSubTab === 'enchanter' && <EnchanterSubTab />}
|
|
</div>
|
|
</DebugName>
|
|
);
|
|
}
|
|
|
|
CraftingTab.displayName = 'CraftingTab';
|