68 lines
2.5 KiB
TypeScript
68 lines
2.5 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
||
import { Link } from 'react-router-dom';
|
||
import { MOCK_USER } from '../../constants/mock';
|
||
import { getUserInfo, isTelegramWebAppAvailable } from '../../constants/user';
|
||
import { images } from '../../assets';
|
||
import styles from './Header.module.css';
|
||
|
||
const Header: React.FC = () => {
|
||
const [user, setUser] = useState(MOCK_USER);
|
||
|
||
useEffect(() => {
|
||
// Получаем информацию о пользователе
|
||
const userInfo = getUserInfo();
|
||
|
||
// Если есть данные из Telegram, обновляем состояние
|
||
if (isTelegramWebAppAvailable()) {
|
||
setUser({
|
||
telegramId: userInfo.id,
|
||
username: userInfo.first_name + (userInfo.last_name ? ` ${userInfo.last_name}` : ''),
|
||
avatarUrl: userInfo.photo_url || MOCK_USER.avatarUrl, // Используем фото из Telegram или дефолтное
|
||
balance: MOCK_USER.balance // Баланс оставляем из моковых данных
|
||
});
|
||
}
|
||
}, []);
|
||
|
||
return (
|
||
<header className={styles.header}>
|
||
<div className={styles.container}>
|
||
<div className={styles.content}>
|
||
{/* Профиль пользователя */}
|
||
<Link to="/profile" className={styles.profile}>
|
||
<div className={styles.avatar}>
|
||
<img
|
||
src={user.avatarUrl}
|
||
alt="Avatar"
|
||
className={styles.avatarImage}
|
||
onError={(e) => {
|
||
e.currentTarget.onerror = null;
|
||
e.currentTarget.src = 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999"><circle cx="12" cy="8" r="4"/><path d="M12 13c-4 0-8 2-8 6v1h16v-1c0-4-4-6-8-6z"/></svg>';
|
||
}}
|
||
/>
|
||
</div>
|
||
<span className={styles.username}>
|
||
{user.username}
|
||
</span>
|
||
</Link>
|
||
|
||
{/* Баланс токенов */}
|
||
<button
|
||
className={styles.balance}
|
||
onClick={() => alert('Пополнить баланс')}
|
||
title="Нажмите чтобы пополнить баланс"
|
||
>
|
||
<span className={styles.balanceIcon}>
|
||
<img src={images.tokenIcon} alt="Токены" className={styles.tokenImage} />
|
||
</span>
|
||
<span className={styles.balanceValue}>
|
||
{user.balance}
|
||
</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
);
|
||
};
|
||
|
||
export default Header;
|