src/components/Header.tsx (view raw)
1import { formatNumber } from '../utils/formatters';
2import '../styles/Header.css';
3
4interface HeaderProps {
5 currency: number;
6 clickValue: number;
7 passiveIncome: number;
8 autoClickRate: number;
9 prestigePoints: number;
10 prestigeMultiplier: number;
11}
12
13const Header = ({
14 currency,
15 clickValue,
16 passiveIncome,
17 autoClickRate,
18 prestigePoints,
19 prestigeMultiplier
20}: HeaderProps) => {
21 return (
22 <header className="game-header">
23 <h1>Clicker Game</h1>
24
25 <div className="stats-container">
26 <div className="stat-item">
27 <h2>{formatNumber(currency)}</h2>
28 <p>Currency</p>
29 </div>
30
31 <div className="stat-item">
32 <h3>Click Value: {formatNumber(clickValue)}</h3>
33 <h3>Passive: {formatNumber(passiveIncome)}/sec</h3>
34 <h3>Auto Clicks: {formatNumber(autoClickRate)}/sec</h3>
35 </div>
36
37 <div className="stat-item prestige-stats">
38 <h3>Prestige Points: {formatNumber(prestigePoints)}</h3>
39 <h3>Multiplier: {prestigeMultiplier.toFixed(2)}x</h3>
40 </div>
41 </div>
42 </header>
43 );
44};
45
46export default Header;