be9133e220
Some checks are pending
E2E / Playwright e2e (push) Waiting to run
- Added AuthConnectButton component to centralize and simplify authentication button rendering across various forms. - Updated existing authentication components to utilize AuthConnectButton, enhancing code reusability and maintainability. - Refactored CSS styles for consistent button appearance and layout in authentication flows.
67 lines
1.8 KiB
TypeScript
67 lines
1.8 KiB
TypeScript
"use client"
|
|
|
|
import Link from "next/link"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
type AuthConnectButtonCommon = {
|
|
children: React.ReactNode
|
|
className?: string
|
|
}
|
|
|
|
type AuthConnectButtonAsButton = AuthConnectButtonCommon &
|
|
React.ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
href?: undefined
|
|
}
|
|
|
|
type AuthConnectButtonAsAnchor = AuthConnectButtonCommon &
|
|
React.AnchorHTMLAttributes<HTMLAnchorElement> & {
|
|
href: string
|
|
}
|
|
|
|
type AuthConnectButtonAsLink = AuthConnectButtonCommon &
|
|
Omit<React.ComponentProps<typeof Link>, "href"> & {
|
|
href: string
|
|
as: "link"
|
|
}
|
|
|
|
export type AuthConnectButtonProps =
|
|
| AuthConnectButtonAsButton
|
|
| AuthConnectButtonAsAnchor
|
|
| AuthConnectButtonAsLink
|
|
|
|
/** UltiSpace gradient CTA — full width, centered in auth flows. */
|
|
export function AuthConnectButton(props: AuthConnectButtonProps) {
|
|
const { children, className } = props
|
|
const btnClass = cn("ultimail-login-connect-btn w-full", className)
|
|
|
|
let control: React.ReactNode
|
|
if ("as" in props && props.as === "link") {
|
|
const { as: _as, href, className: _c, children: _ch, ...linkProps } = props
|
|
control = (
|
|
<Link href={href} className={btnClass} {...linkProps}>
|
|
{children}
|
|
</Link>
|
|
)
|
|
} else if ("href" in props && props.href) {
|
|
const { href, className: _c, children: _ch, ...anchorProps } = props
|
|
control = (
|
|
<a href={href} className={btnClass} {...anchorProps}>
|
|
{children}
|
|
</a>
|
|
)
|
|
} else {
|
|
const { className: _c, children: _ch, ...buttonProps } = props
|
|
control = (
|
|
<button className={btnClass} {...buttonProps}>
|
|
{children}
|
|
</button>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="ultimail-login-connect-action">
|
|
<div className="ultimail-login-connect-border">{control}</div>
|
|
</div>
|
|
)
|
|
}
|