user-app/src/components/Header.tsx - master - netsvvir/treeRepo

user-app/src/components/Header.tsx
55 строк2 KB
netsvvir
Upload project
23 ноя 2025, 15:06
23 ноя 2025, 15:06ce0a46d
import React from 'react';
import { User, LogOut, TreePine } from 'lucide-react';
import { User as UserType } from '../types';

interface HeaderProps {
    user: UserType | null;
    onLogout: () => void;
}

const Header: React.FC<HeaderProps> = ({ user, onLogout }) => {
    return (
        <header className="bg-white shadow-sm border-b border-gray-200">
            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div className="flex justify-between items-center h-16">
                    {/* Логотип и название */}
                    <div className="flex items-center space-x-3">
                        <div className="bg-green-600 p-2 rounded-lg">
                            <TreePine className="w-6 h-6 text-white" />
                        </div>
                        <div>
                            <h1 className="text-xl font-bold text-gray-900">
                                Посади свое дерево
                            </h1>
                            <p className="text-sm text-gray-600">В память о близких</p>
                        </div>
                    </div>

                    {/* Инфо пользователя */}
                    {user && (
                        <div className="flex items-center space-x-4">
                            <div className="text-right">
                                <p className="text-sm font-medium text-gray-900">
                                    {user.first_name} {user.last_name || ''}
                                </p>
                                <p className="text-xs text-gray-600">@{user.username}</p>
                            </div>
                            <div className="bg-gray-100 p-2 rounded-full">
                                <User className="w-5 h-5 text-gray-600" />
                            </div>
                            <button
                                onClick={onLogout}
                                className="flex items-center space-x-2 px-3 py-2 text-gray-700 hover:text-gray-900 transition-colors"
                                title="Выйти"
                            >
                                <LogOut className="w-4 h-4" />
                            </button>
                        </div>
                    )}
                </div>
            </div>
        </header>
    );
};

export default Header;