Smart Underline Link

'use client';

import type { ReactNode } from 'react';
import './AnimatedUnderlineLink.css';

/** AnimatedUnderlineLink — ported from astro-component-kit. */
export interface AnimatedUnderlineLinkProps {
  href: string;
  children?: ReactNode;
}

export function AnimatedUnderlineLink({ href,
  children
}: AnimatedUnderlineLinkProps) {
  return (
    <>
      <a href={href} className="smart-link" data-rk-8961c9="">{children}</a>
    </>
  );
}

export default AnimatedUnderlineLink;

/* AnimatedUnderlineLink — ported from astro-component-kit (typography/AnimatedUnderlineLink.astro) */

.smart-link:where([data-rk-8961c9]) { color: #818cf8; text-decoration: none; position: relative; font-weight: 600; padding: 2px 0; }
.smart-link:where([data-rk-8961c9])::after { content: ""; position: absolute; bottom: -2px; left: 50%; width: 0; height: 2px; background: #6366f1; transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.smart-link:hover:where([data-rk-8961c9])::after { width: 100%; left: 0; }