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 (
Inline user card:
Hover this text see card in tooltip mode
); } } render(, document.getElementById('demo'));
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 (
Hover this text load user information
); } } render(, document.getElementById('demo'));
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 (
Hover this text load user information
); } } render(, document.getElementById('demo')); })();