Function UserButtonText

frontend/src/components/auth/UserButton.tsx:195–216

({ className = '' })

// Text-based version for mobile or accessibility
export const UserButtonText: React.FC<{ className?: string }> = ({ className = '' }) => {
  const authProvider = useAuthProvider();
  const { user, isAuthenticated, isLoading } = authProvider.context;

  if (isLoading) {
    return <div className={`animate-pulse w-16 h-4 bg-muted rounded ${className}`}></div>;
  }

  if (!isAuthenticated || !user) {
    return (
      <Button variant="ghost" size="sm" onClick={authProvider.signIn} className={className}>
        Sign In
      </Button>
    );
  }

  return (
    <Button variant="ghost" size="sm" onClick={() => authProvider.signOut()} className={className}>
      Sign Out
    </Button>
  );
};