43 lines
1.6 KiB
TypeScript
43 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import type { ButtonHTMLAttributes, ReactNode } from "react";
|
|
|
|
export interface SubscriptionCtaButtonProps
|
|
extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
children: ReactNode;
|
|
isLoading?: boolean;
|
|
}
|
|
|
|
export function SubscriptionCtaButton({
|
|
children,
|
|
isLoading = false,
|
|
className,
|
|
disabled,
|
|
...rest
|
|
}: SubscriptionCtaButtonProps) {
|
|
const classes = [
|
|
"inline-flex min-h-[clamp(48px,9.63vw,52px)] w-full cursor-pointer items-center justify-center rounded-full border-0 bg-[linear-gradient(269deg,#ff67e0_0%,rgba(254,104,224,0.5)_20%,rgba(252,105,223,0.79)_66%,#f96ade_100%),linear-gradient(#f657a0,#f657a0)] px-(--responsive-card-padding,var(--spacing-lg)) text-(length:--responsive-body,var(--font-size-lg)) font-semibold text-white opacity-85 shadow-[0_5px_7px_0_rgba(247,89,168,0.31)] transition-[filter,transform,opacity] duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent active:enabled:scale-98 disabled:cursor-not-allowed disabled:opacity-50",
|
|
className,
|
|
]
|
|
.filter(Boolean)
|
|
.join(" ");
|
|
return (
|
|
<button
|
|
{...rest}
|
|
type="button"
|
|
disabled={disabled || isLoading}
|
|
className={classes}
|
|
>
|
|
<span className="inline-flex flex-auto items-center justify-center gap-sm text-center">
|
|
{isLoading ? (
|
|
<span
|
|
className="inline-block size-[clamp(16px,3.333vw,18px)] animate-spin rounded-full border-2 border-solid border-white border-r-transparent border-b-transparent border-l-transparent"
|
|
aria-hidden="true"
|
|
/>
|
|
) : null}
|
|
{children}
|
|
</span>
|
|
</button>
|
|
);
|
|
}
|