105 lines
4.0 KiB
TypeScript
105 lines
4.0 KiB
TypeScript
import React from 'react';
|
|
|
|
interface MainMenuProps {
|
|
onSectionSelect: (section: string) => void;
|
|
employee: any;
|
|
}
|
|
|
|
const MainMenu: React.FC<MainMenuProps> = ({ onSectionSelect, employee }) => {
|
|
console.log('🔵 MainMenu компонент рендерится!');
|
|
|
|
const menuItems = [
|
|
{ id: 'employee-info', title: 'Моя информация', emoji: '📋' },
|
|
{ id: 'finance', title: 'Финансы', emoji: '💰' },
|
|
{ id: 'medicine', title: 'Медицина', emoji: '🏥' },
|
|
{ id: 'trade-union', title: 'Профсоюз', emoji: '🤝' },
|
|
{ id: 'labor-safety', title: 'Охрана труда', emoji: '⛑️' },
|
|
{ id: 'contacts', title: 'Контакты', emoji: '📞' },
|
|
{ id: 'news', title: 'Новости', emoji: '📰' },
|
|
{ id: 'profile', title: 'Обо мне', emoji: '👤' },
|
|
];
|
|
|
|
return (
|
|
<div style={{
|
|
minHeight: '100vh',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
padding: '40px',
|
|
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
|
}}>
|
|
{employee && (
|
|
<div style={{
|
|
color: '#fff',
|
|
fontSize: '1.2rem',
|
|
marginBottom: '10px',
|
|
}}>
|
|
Здравствуйте, {employee.ima} {employee.famaly}
|
|
</div>
|
|
)}
|
|
<h1 style={{
|
|
color: '#fff',
|
|
fontSize: '2.5rem',
|
|
marginBottom: '40px',
|
|
fontWeight: 300,
|
|
}}>
|
|
Выберите раздел
|
|
</h1>
|
|
|
|
<div style={{
|
|
display: 'grid',
|
|
gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 200px))',
|
|
gap: '25px',
|
|
maxWidth: '900px',
|
|
width: '100%',
|
|
justifyContent: 'center',
|
|
}}>
|
|
{menuItems.map((item) => (
|
|
<button
|
|
key={item.id}
|
|
onClick={() => onSectionSelect(item.id)}
|
|
style={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
gap: '12px',
|
|
padding: '25px 20px',
|
|
background: 'rgba(255,255,255,0.95)',
|
|
border: 'none',
|
|
borderRadius: '16px',
|
|
cursor: 'pointer',
|
|
boxShadow: '0 8px 30px rgba(0,0,0,0.12)',
|
|
minHeight: '140px',
|
|
fontSize: '2.5rem',
|
|
transition: 'all 0.3s ease',
|
|
}}
|
|
onMouseEnter={(e) => {
|
|
e.currentTarget.style.transform = 'scale(1.05)';
|
|
e.currentTarget.style.boxShadow = '0 12px 40px rgba(0,0,0,0.2)';
|
|
}}
|
|
onMouseLeave={(e) => {
|
|
e.currentTarget.style.transform = 'scale(1)';
|
|
e.currentTarget.style.boxShadow = '0 8px 30px rgba(0,0,0,0.12)';
|
|
}}
|
|
>
|
|
<div>{item.emoji}</div>
|
|
<span style={{
|
|
fontSize: '1rem',
|
|
fontWeight: 500,
|
|
color: '#2d3436',
|
|
textAlign: 'center',
|
|
}}>
|
|
{item.title}
|
|
</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
console.log('🟢 MainMenu.tsx экспорт готов');
|
|
|
|
export default MainMenu; |