all repos — clicker-ts @ main

Unnamed repository; edit this file 'description' to name the repository.

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;