46 lines
1.4 KiB
Plaintext
46 lines
1.4 KiB
Plaintext
import { Button } from "@wrnexus/ui"
|
|
|
|
component AuthProviderButtons {
|
|
outputs {
|
|
select(payload: { provider: string; href: string })
|
|
}
|
|
|
|
props {
|
|
providers: unknown[] = []
|
|
title: string = "Continue with"
|
|
dividerLabel: string = "or"
|
|
color: string = "primary"
|
|
size: string = "md"
|
|
class: string = ""
|
|
}
|
|
|
|
functions {
|
|
client function choose(provider) {
|
|
output.select({ provider: provider.id || provider.name || provider.label, href: provider.href || "" })
|
|
}
|
|
}
|
|
|
|
view {
|
|
<div {...attrs} class='space-y-3 {class}'>
|
|
{#if title}<p class="m-0 text-sm font-semibold text-[var(--wrn-color-text)]">{title}</p>{/if}
|
|
<div class="grid gap-2 sm:grid-cols-2">
|
|
{#each providers as provider}
|
|
<Button
|
|
label='{provider.label || provider.name || "Continue"}'
|
|
href='{provider.href || ""}'
|
|
icon='{provider.icon || "icon-[lucide--log-in]"}'
|
|
variant='{provider.variant || "outline"}'
|
|
color='{provider.color || color}'
|
|
size='{size}'
|
|
fullWidth="true"
|
|
@click='choose(provider)'
|
|
/>
|
|
{/each}
|
|
</div>
|
|
{#if dividerLabel}
|
|
<div class="flex items-center gap-3 text-xs text-[var(--wrn-color-muted)]"><span class="h-px flex-1 bg-[var(--wrn-color-border)]"></span><span>{dividerLabel}</span><span class="h-px flex-1 bg-[var(--wrn-color-border)]"></span></div>
|
|
{/if}
|
|
</div>
|
|
}
|
|
}
|