first commit

frontend/src/components/auth/SSOButtons.tsx

@@ -0,0 +1,34 @@
+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>
+  )
+}