vf_react/src/components/Navbars/components/LoginButton.js

// src/components/Navbars/components/LoginButton.js
import React, { memo } from 'react';
import { Button } from '@chakra-ui/react';
import { useAuthModal } from '../../../hooks/useAuthModal';

/**
 * 登录/注册按钮组件
 *
 * 性能优化：
 * - 使用 memo 避免父组件重新渲染时的不必要更新
 * - 纯展示组件，无复杂逻辑
 *
 * @returns {JSX.Element}
 */
const LoginButton = memo(() => {
    const { openAuthModal } = useAuthModal();

    return (
        <Button
            colorScheme="blue"
            variant="solid"
            size="sm"
            borderRadius="full"
            onClick={() => openAuthModal()}
            _hover={{
                transform: "translateY(-1px)",
                boxShadow: "md"
            }}
        >
            登录 / 注册
        </Button>
    );
});

LoginButton.displayName = 'LoginButton';

export default LoginButton;