import React from 'react' ; import { Text , Box , Flex , ButtonPrimary , Card } from 'design' ; import * as Icons from 'design/Icon' ; import { State as ResourceState } from 'teleport/components/useResources' ; export default function EmptyList ( { onCreate } ) { return ( < Card maxWidth = "700px" p = { 6 } as = { Flex } alignItems = "center" > < Icons . Github style = { { textAlign : 'center' } } fontSize = "150px" color = "primary.lighter" mr = { 5 } / > < Box > < Text typography = "h6" mb = { 3 } caps > Create Your First Github Connector < /Text> < Text typography = "subtitle1" mb = { 3 } > Authentication connectors allow Teleport to authenticate users via an external identity source such as Okta , Active Directory , GitHub , etc . This authentication method is frequently called single sign - on ( SSO ) . < /Text> < Text typography = "subtitle1" > Open Source Teleport supports only GitHub connectors . Please { ' ' } < Text as = "a" color = "light" href = "https://goteleport.com/teleport/docs/admin-guide/#github-oauth-20" target = "_blank" > view our documentation < /Text>{' '} on how to configure a GitHub connector . < /Text> < ButtonPrimary onClick = { onCreate } mt = { 4 } width = "240px" > New Github Connector < /ButtonPrimary> < /Box> < /Card>); } type Props = { onCreate : ResourceState [ 'create' ] ; } ;