34 lines
1.2 KiB
TypeScript
34 lines
1.2 KiB
TypeScript
import { ssoProviders } from '../../data/authData'
|
|
|
|
interface SSOButtonsProps {
|
|
onSelect: (providerId: string) => void
|
|
selectedProvider?: string | null
|
|
compact?: boolean
|
|
}
|
|
|
|
export default function SSOButtons({ onSelect, selectedProvider, compact = false }: SSOButtonsProps) {
|
|
return (
|
|
<div className={`grid gap-2 ${compact ? 'grid-cols-2 sm:grid-cols-3' : 'grid-cols-2 sm:grid-cols-3'}`}>
|
|
{ssoProviders.map((provider) => (
|
|
<button
|
|
key={provider.id}
|
|
type="button"
|
|
onClick={() => onSelect(provider.id)}
|
|
className={`flex items-center justify-center gap-2 rounded-xl border bg-white text-sm font-medium transition-all hover:shadow-md ${
|
|
selectedProvider === provider.id
|
|
? 'border-silos-brown bg-silos-brown/5 text-silos-brown ring-2 ring-silos-brown/20'
|
|
: 'border-silos-cream-dark text-silos-text hover:border-silos-tan'
|
|
} ${compact ? 'px-3 py-2' : 'px-4 py-2.5'}`}
|
|
>
|
|
<img
|
|
src={provider.logo}
|
|
alt=""
|
|
className="h-5 w-5 shrink-0 object-contain"
|
|
aria-hidden
|
|
/>
|
|
{provider.name}
|
|
</button>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|