import {SanityMonogram} from '@sanity/logos'
import styled from 'styled-components'
const Root = styled.div`
position: absolute;
width: 18px;
height: 18px;
background: var(--card-bg-color);
bottom: -4px;
right: -4px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid var(--card-bg-color);
box-sizing: content-box;
svg {
box-sizing: content-box;
border: 1px solid var(--card-hairline-soft-color);
border-radius: 50%;
padding: 2px;
width: 12px;
height: 12px;
}
&[data-logo='github'] {
svg {
path {
fill: var(--card-fg-color);
}
}
}
&[data-logo='saml'] {
svg {
path {
fill: var(--card-fg-color);
}
}
}
`
const Google = (
)
const GitHub = (
)
const Saml = (
)
interface Props {
provider: string | undefined
}
export const LoginProviderLogo = ({provider}: Props) => {
const isSaml = provider?.startsWith('saml-')
const logoName = isSaml ? 'saml' : provider
return (
{provider === 'google' && Google}
{provider === 'github' && GitHub}
{provider === 'sanity' && }
{isSaml && Saml}
)
}