Function Button

docs/app/components/ui/Button.tsx:6–57

({
	borderRadius = "1.75rem",
	children,
	as: Component = "button",
	containerClassName,
	borderClassName,
	duration,
	className,
	...otherProps
}: {
	borderRadius?: string
	children: React.ReactNode
	as?: any
	containerClassName?: string
	borderClassName?: string
	duration?: number
	className?: string
	[key: string]: any
})

import { cn } from "~/utils/css"

export function Button({
	borderRadius = "1.75rem",
	children,
	as: Component = "button",
	containerClassName,
	borderClassName,
	duration,
	className,
	...otherProps
}: {
	borderRadius?: string
	children: React.ReactNode
	as?: any
	containerClassName?: string
	borderClassName?: string
	duration?: number
	className?: string
	[key: string]: any
}) {
	return (
		<Component
			className={cn("relative h-16 w-40  overflow-hidden bg-transparent p-[1px] text-xl ", containerClassName)}
			style={{
				borderRadius: borderRadius,
			}}
			{...otherProps}
		>
			<div className="absolute inset-0" style={{ borderRadius: `calc(${borderRadius} * 0.96)` }}>
				<MovingBorder duration={duration} rx="30%" ry="30%">
					<div
						className={cn(
							"h-20 w-20 bg-[radial-gradient(var(--sky-500)_40%,transparent_60%)] opacity-[0.8]",
							borderClassName
						)}
					/>
				</MovingBorder>
			</div>

			<div
				className={cn(
					"relative flex h-full w-full items-center justify-center border border-slate-800 bg-slate-900/[0.8] text-sm text-white antialiased backdrop-blur-xl",
					className
				)}
				style={{
					borderRadius: `calc(${borderRadius} * 0.96)`,
				}}
			>
				{children}
			</div>
		</Component>
	)
}

const MovingBorder = ({
	children,