60 lines
1.3 KiB
JavaScript
60 lines
1.3 KiB
JavaScript
import React from 'react';
|
|
|
|
const Header = ({ tournamentName }) => {
|
|
return (
|
|
<header style={{
|
|
position: 'fixed',
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
height: '60px',
|
|
backgroundColor: '#ffffff',
|
|
borderBottom: '1px solid #e5e7eb',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
padding: '0 20px',
|
|
zIndex: 1000,
|
|
boxShadow: '0 1px 3px rgba(0,0,0,0.1)'
|
|
}}>
|
|
<div style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: '12px'
|
|
}}>
|
|
<div style={{
|
|
width: '32px',
|
|
height: '32px',
|
|
backgroundColor: '#2563eb',
|
|
borderRadius: '50%',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
color: 'white',
|
|
fontWeight: 'bold',
|
|
fontSize: '14px'
|
|
}}>
|
|
T
|
|
</div>
|
|
<h1 style={{
|
|
fontSize: '18px',
|
|
fontWeight: '600',
|
|
margin: 0,
|
|
color: '#1e293b'
|
|
}}>
|
|
{tournamentName || 'Tournament Manager'}
|
|
</h1>
|
|
</div>
|
|
|
|
<div style={{
|
|
fontSize: '12px',
|
|
color: '#64748b',
|
|
fontWeight: '500'
|
|
}}>
|
|
{new Date().toLocaleDateString()}
|
|
</div>
|
|
</header>
|
|
);
|
|
};
|
|
|
|
export default Header;
|