48 lines
1.4 KiB
Plaintext
48 lines
1.4 KiB
Plaintext
|
---
|
||
|
|
import { getAuthConfig } from '../config/auth';
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
variant?: 'primary' | 'inverted';
|
||
|
|
size?: 'md' | 'lg';
|
||
|
|
showSecondary?: boolean;
|
||
|
|
primaryLabel?: string;
|
||
|
|
secondaryLabel?: string;
|
||
|
|
secondaryHref?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
const auth = getAuthConfig();
|
||
|
|
|
||
|
|
const {
|
||
|
|
variant = 'primary',
|
||
|
|
size = 'md',
|
||
|
|
showSecondary = true,
|
||
|
|
primaryLabel = 'Start free trial',
|
||
|
|
secondaryLabel = 'Sign in',
|
||
|
|
secondaryHref = auth.signInUrl,
|
||
|
|
} = Astro.props;
|
||
|
|
|
||
|
|
const padY = size === 'lg' ? 'py-3' : 'py-2';
|
||
|
|
const padX = size === 'lg' ? 'px-6' : 'px-5';
|
||
|
|
const fontSize = size === 'lg' ? 'text-base' : 'text-sm';
|
||
|
|
---
|
||
|
|
<div class="flex flex-wrap items-center gap-3">
|
||
|
|
<a
|
||
|
|
href={auth.signUpUrl}
|
||
|
|
class={`inline-flex items-center justify-center rounded ${padX} ${padY} ${fontSize} font-semibold transition-colors
|
||
|
|
${variant === 'primary'
|
||
|
|
? 'bg-accent text-bg hover:bg-accent-muted focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-bg'
|
||
|
|
: 'bg-bg text-accent border border-accent hover:bg-accent hover:text-bg'
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
{primaryLabel}
|
||
|
|
</a>
|
||
|
|
{showSecondary && (
|
||
|
|
<a
|
||
|
|
href={secondaryHref}
|
||
|
|
class={`inline-flex items-center justify-center rounded ${padX} ${padY} ${fontSize} font-medium text-text border border-border-strong hover:border-accent hover:text-accent transition-colors`}
|
||
|
|
>
|
||
|
|
{secondaryLabel}
|
||
|
|
</a>
|
||
|
|
)}
|
||
|
|
</div>
|