---interface Props {  variant?: "primary" | "outline";  href?: string;  type?: "button" | "submit" | "reset";  disabled?: boolean;  class?: string;} const {  variant = "primary",  href,  type = "button",  disabled = false,  class: className = "",} = Astro.props; const variants = {  primary: "bg-black-onyx text-white-ghost hover:bg-black-onyx/90",  outline: "bg-white-ghost text-black-onyx border border-black-onyx/90",}; const classes = `inline-flex items-center justify-center gap-2 px-5 py-2 rounded transition-all duration-200 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-black-onyx focus:outline-nonedisabled:opacity-50 disabled:pointer-events-none ${variants[variant]} ${className}`;--- {  href ? (    <a href={disabled ? undefined : href} class={classes} aria-disabled={disabled ? "true" : undefined} tabindex={disabled ? -1 : undefined}>      <slot />    </a>  ) : (    <button type={type} disabled={disabled} class={classes}>      <slot />    </button>  )} 
    
  

    
      <MainButton variant='primary'>Get Started</MainButton><MainButton variant='outline' href='https://github.com'>View on GitHub</MainButton>