Initial commit

src/components/game/tabs/LootTab.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import type { GameStore } from '@/lib/game/store';
+import { LootInventoryDisplay } from '@/components/game/LootInventory';
+
+export interface LootTabProps {
+  store: GameStore;
+}
+
+export function LootTab({ store }: LootTabProps) {
+  const inventory = store.lootInventory;
+  const elements = store.elements;
+  const equipmentInstances = store.equipmentInstances;
+  
+  // Count items for badge
+  const materialCount = Object.values(inventory.materials).reduce((a, b) => a + b, 0);
+  const blueprintCount = inventory.blueprints.length;
+  const equipmentCount = Object.keys(equipmentInstances).length;
+  const totalItems = materialCount + blueprintCount + equipmentCount;
+  
+  return (
+    <div className="space-y-4">
+      <Card className="bg-gray-900/80 border-gray-700">
+        <CardHeader className="pb-2">
+          <CardTitle className="text-amber-400 text-sm flex items-center gap-2">
+            💎 Loot Inventory
+            <Badge className="ml-auto bg-gray-800 text-gray-300">
+              {totalItems} items
+            </Badge>
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <LootInventoryDisplay
+            inventory={inventory}
+            elements={elements}
+            equipmentInstances={equipmentInstances}
+            onDeleteMaterial={store.deleteMaterial}
+            onDeleteEquipment={store.deleteEquipmentInstance}
+          />
+        </CardContent>
+      </Card>
+    </div>
+  );
+}