Phase 3: Extract sub-components from StatsTab.tsx

2026-04-24 14:45:07 +02:00
parent eea5ed1585
commit 7d1bfbe4dc
7 changed files with 480 additions and 355 deletions
@@ -0,0 +1,55 @@
+'use client';
+
+import { fmtDec } from '@/lib/game/store';
+import type { GameStore } from '@/lib/game/types';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { BookOpen } from 'lucide-react';
+
+export interface StudyStatsSectionProps {
+  store: GameStore;
+  studySpeedMult: number;
+  studyCostMult: number;
+}
+
+export function StudyStatsSection({ store, studySpeedMult, studyCostMult }: StudyStatsSectionProps) {
+  return (
+    <Card className="bg-gray-900/80 border-gray-700">
+      <CardHeader className="pb-2">
+        <CardTitle className="text-purple-400 game-panel-title text-xs flex items-center gap-2">
+          <BookOpen className="w-4 h-4" />
+          Study Stats
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <div className="space-y-2">
+            <div className="flex justify-between text-sm">
+              <span className="text-gray-400">Study Speed:</span>
+              <span className="text-purple-300">×{fmtDec(studySpeedMult, 2)}</span>
+            </div>
+            <div className="flex justify-between text-sm">
+              <span className="text-gray-400">Quick Learner Bonus:</span>
+              <span className="text-purple-300">+{((store.skills.quickLearner || 0) * 10)}%</span>
+            </div>
+          </div>
+          <div className="space-y-2">
+            <div className="flex justify-between text-sm">
+              <span className="text-gray-400">Study Cost:</span>
+              <span className="text-purple-300">{Math.round(studyCostMult * 100)}%</span>
+            </div>
+            <div className="flex justify-between text-sm">
+              <span className="text-gray-400">Focused Mind Bonus:</span>
+              <span className="text-purple-300">-{((store.skills.focusedMind || 0) * 5)}%</span>
+            </div>
+          </div>
+          <div className="space-y-2">
+            <div className="flex justify-between text-sm">
+              <span className="text-gray-400">Progress Retention:</span>
+              <span className="text-purple-300">{Math.round((1 + (store.skills.knowledgeRetention || 0) * 0.2) * 100)}%</span>
+            </div>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}