feat: render one login button per configured auth provider

2026-08-03 10:56:03 +01:00
parent dde47de145
commit 3a626922a5
3 changed files with 228 additions and 48 deletions
@@ -0,0 +1,40 @@
+/**
+ * One glyph per preset, plus a neutral key for anything custom. These are
+ * simplified marks drawn with currentColor rather than brand logos: a brand
+ * logo carries usage terms, and currentColor is what lets a button match the
+ * text beside it.
+ */
+export function ProviderIcon({ preset, className = "h-4 w-4" }: { preset: string; className?: string }) {
+    switch (preset) {
+        case "github":
+            return (
+                <svg className={className} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+                    <path d="M12 2a10 10 0 00-3.16 19.49c.5.09.68-.22.68-.48v-1.7c-2.78.6-3.37-1.34-3.37-1.34-.45-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.89 1.53 2.34 1.09 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.56-1.11-4.56-4.94 0-1.09.39-1.98 1.03-2.68-.1-.25-.45-1.27.1-2.65 0 0 .84-.27 2.75 1.02a9.5 9.5 0 015 0c1.91-1.29 2.75-1.02 2.75-1.02.55 1.38.2 2.4.1 2.65.64.7 1.03 1.59 1.03 2.68 0 3.84-2.34 4.69-4.57 4.94.36.31.68.92.68 1.85v2.74c0 .27.18.58.69.48A10 10 0 0012 2z" />
+                </svg>
+            );
+        case "google":
+            return (
+                <svg className={className} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+                    <path d="M12 11v2.6h6.2c-.25 1.6-1.87 4.7-6.2 4.7A6.3 6.3 0 1112 5.7c1.98 0 3.3.85 4.06 1.58l2.77-2.67A9.9 9.9 0 0012 2a10 10 0 100 20c5.77 0 9.6-4.06 9.6-9.77 0-.66-.07-1.16-.16-1.66H12z" />
+                </svg>
+            );
+        case "entra":
+            return (
+                <svg className={className} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+                    <path d="M12 2L3 19h5.4L12 12l3.6 7H21L12 2z" />
+                </svg>
+            );
+        case "okta":
+            return (
+                <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.5} aria-hidden="true">
+                    <circle cx="12" cy="12" r="7" />
+                </svg>
+            );
+        default:
+            return (
+                <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5} aria-hidden="true">
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.03 5.91l-1.72 1.72a.75.75 0 01-.53.22H9.75v1.5a.75.75 0 01-.75.75H7.5v1.5a.75.75 0 01-.75.75H4.5a.75.75 0 01-.75-.75v-2.19a.75.75 0 01.22-.53l5.11-5.11A6 6 0 1121.75 8.25z" />
+                </svg>
+            );
+    }
+}