Version

User Card

A component that displays user details.

User Card

Example
<div id="demo"></div>
import React, {Component} from 'react';
import {render} from 'react-dom';
import {UserCard, UserCardTooltip} from '@jetbrains/ring-ui/components/user-card/user-card';
import hubConfig from '@ring-ui/docs/components/hub-config';

const user = {
  login: 'testuser',
  name: 'Test User',
  email: 'testuser@mail.com',
  avatarUrl: `${hubConfig.serverUri}/api/rest/avatar/default?username=Jet%20Brains`,
  href: `${hubConfig.serverUri}/users/0`
};

class UserCardDemo extends Component {
 render() {
   return (
     <div>
       <div>Inline user card:</div>
       <UserCard user={user} data-test="user-card-inline"/>

       <UserCardTooltip user={user}>
         <span>Hover this text see card in tooltip mode</span>
       </UserCardTooltip>
     </div>
   );
 }
}

render(<UserCardDemo />, document.getElementById('demo'));

Smart User Card Tooltip

Example
<div id="demo"></div>
import React, {Component} from 'react';
import {render} from 'react-dom';
import {SmartUserCardTooltip} from '@jetbrains/ring-ui/components/user-card/user-card';

const user = {
  login: 'testuser',
  name: 'Test User',
  email: 'testuser@mail.com',
  avatarUrl: `${hubConfig.serverUri}/api/rest/avatar/default?username=Jet%20Brains`,
  href: `${hubConfig.serverUri}/users/0`,
  banned: true,
  online: false,
  banReason: 'Bad guy: is accused of stealing potatoes'
};

async function loadUser() {
  return new Promise(resolve => setTimeout(resolve, 10000)).
    then(() => user);
}

class UserCardDemo extends Component {
  render() {
    return (
      <div>
        <SmartUserCardTooltip userDataSource={loadUser}>
          <span>Hover this text load user information</span>
        </SmartUserCardTooltip>
      </div>
    );
  }
}

render(<UserCardDemo />, document.getElementById('demo'));

Hub User Card

Example
<div id="demo"></div>
import React, {Component} from 'react';
import {render} from 'react-dom';
import {SmartUserCardTooltip} from '@jetbrains/ring-ui/components/user-card/user-card';
import {createHubUserCardSource} from '@jetbrains/ring-ui/components/hub-source/hub-source__user.js';
import Auth from '@jetbrains/ring-ui/components/auth/auth';
import hubConfig from '@ring-ui/docs/components/hub-config';

(async function () {
  const auth = new Auth(hubConfig);
  await auth.init();

  const userSource = createHubUserCardSource(auth, auth.user.id);

  class UserCardDemo extends Component {
    render() {
      return (
        <div>
          <SmartUserCardTooltip userDataSource={userSource}>
            <span>Hover this text load user information</span>
          </SmartUserCardTooltip>
        </div>
      );
    }
  }

  render(<UserCardDemo />, document.getElementById('demo'));
})();