"use client" import type { ComponentPropsWithoutRef } from "react" import { cn } from "@/lib/utils" /** * Requires these keyframes and utilities in your CSS (e.g. global CSS or Tailwind): * * @keyframes cosmic-spin { * from { transform: rotate(0deg); } * to { transform: rotate(360deg); } * } * @keyframes cosmic-spin-slow { * from { transform: rotate(0deg); } * to { transform: rotate(-360deg); } * } * @utility animate-cosmic-spin { * animation: cosmic-spin 3s linear infinite; * } * @utility animate-cosmic-spin-slow { * animation: cosmic-spin-slow 5s linear infinite; * } */ export type CosmicButtonProps = { /** The HTML element to render as. @default "a" */ as?: E } & ComponentPropsWithoutRef /** * An animated button/link with a cosmic gradient border effect. * Renders as an anchor by default; use `as="button"` for button behavior. * * @example * // As link (default) * About * * @example * // As button * Submit */ export function CosmicButton({ as, className, children, ...props }: CosmicButtonProps) { const Element = as ?? "a" const isAnchor = Element === "a" const baseClassName = cn( "group/cosmic relative inline-flex min-h-11 min-w-11 items-center justify-center gap-3 rounded-[15px] p-[3px] transition-transform ", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#adfa1b] focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-[#0c0912]", className ) const content = ( <> {/* Animated cosmic border - enlarges on hover */} {/* Noise/texture overlay on the border - enlarges on hover */} {/* Theme-aware inner background */} {children ?? "Placeholder text"} ) if (isAnchor) { const { href, rel, target, ...rest } = props as ComponentPropsWithoutRef<"a"> return ( {content} ) } return ( ) }

Cosmic Button

Instalação