feat(ceremony): add x as provider

unionlabs · Sep 18, 2024 · 01fbc5e · 01fbc5e
1 parent 089b44f
commit 01fbc5e
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 7 deletions.
diff --git a/ceremony/src/lib/components/Button.svelte b/ceremony/src/lib/components/Button.svelte
@@ -6,7 +6,7 @@ let { children, class: className = "", loading = false, ...props } = $props()
 
 <button
         {...props}
-        class={`flex items-center gap-2 px-4 py-2 text-black font-bold hover:text-black bg-union-accent-500 uppercase justify-center ${className}`}>
+        class={`flex items-center w-full gap-2 px-4 py-2 text-black font-bold hover:text-black bg-union-accent-500 uppercase justify-center ${className}`}>
   {@render children()}
   {#if loading}
     <Spinner class="size-4"/>

diff --git a/ceremony/src/routes/auth/dive/+page.svelte b/ceremony/src/routes/auth/dive/+page.svelte
@@ -2,10 +2,11 @@
 import Button from "$lib/components/Button.svelte"
 import { page } from "$app/stores"
 import { supabase } from "$lib/supabase/client.ts"
+import H1 from "$lib/components/typography/H1.svelte"
 // import Spinner from "$lib/components/Spinner.svelte"
 
-type AuthProviders = "github" | "google"
-const providers: Array<AuthProviders> = ["github", "google"]
+type AuthProviders = "github" | "google" | "twitter"
+const providers: Array<AuthProviders> = ["github", "google", "twitter"]
 
 async function diveIn(provider: AuthProviders) {
   const { data, error } = await supabase.auth.signInWithOAuth({
@@ -23,14 +24,17 @@ async function diveIn(provider: AuthProviders) {
 
 {#snippet Dive(provider)}
 <Button onclick={() => diveIn(provider)}>
-  <span>Dive in using {provider}</span>
+  <span>{provider === "twitter" ? "X" : provider}</span>
 </Button>
 {/snippet}
 
 <div class="p-8 flex items-center flex-col gap-4">
-  {#each providers as provider}
-    {@render Dive(provider)}
-  {/each}
+  <H1>Dive in</H1>
+  <div class="flex gap-4">
+    {#each providers as provider}
+      {@render Dive(provider)}
+    {/each}
+  </div>
 </div>
 
 <!--{#if loading}-->