import { observer } from 'mobx-react-lite' ; import styled from 'reshadow' ; import { TabPanel } from '@cloudbeaver/core-ui' ; import { BASE_CONTAINERS_STYLES , ColoredContainer , Container , Group } from '@cloudbeaver/core-blocks' ; import type { UserInfo } from '@cloudbeaver/core-sdk' ; import { ComponentStyle , useStyles } from '@cloudbeaver/core-theming' ; import { AuthProvidersList } from './AuthProvidersList' ; interface Props { user : UserInfo ; className ? : string ; style ? : ComponentStyle ; } export const UserAuthProviderPanel = observer < Props > ( function UserAuthProviderPanel ( { user , className , style , } ) { const styles = useStyles ( style , BASE_CONTAINERS_STYLES ) ; return styled ( styles ) ( < TabPanel tabId = 'auth-providers' className = { className } > < ColoredContainer wrap overflow parent gap > < Container medium gap > < Group box medium overflow > < AuthProvidersList user = { user } providers = { user . linkedAuthProviders } / > < /Group> < /Container> < /ColoredContainer> < /TabPanel>); } ) ;