On-Page Anchor Nav

'use client';

import './AnchorSideNav.css';

/** AnchorSideNav — ported from astro-component-kit. */
export interface AnchorSideNavProps {
}

export function AnchorSideNav({}: AnchorSideNavProps) {
  return (
    <>
      <ul className="anchor-nav" data-rk-f60bfc="">
        <li data-rk-f60bfc=""><a href="#intro" className="active" data-rk-f60bfc="">Introduction</a></li>
        <li data-rk-f60bfc=""><a href="#features" data-rk-f60bfc="">Features</a></li>
        <li data-rk-f60bfc=""><a href="#pricing" data-rk-f60bfc="">Pricing</a></li>
        <li data-rk-f60bfc=""><a href="#faq" data-rk-f60bfc="">FAQ</a></li>
      </ul>
    </>
  );
}

export default AnchorSideNav;

/* AnchorSideNav — ported from astro-component-kit (navigation/AnchorSideNav.astro) */

.anchor-nav:where([data-rk-f60bfc]) { list-style: none; padding: 0.5rem; border-left: 1px solid rgba(255, 255, 255, 0.1); position: sticky; top: 100px; }
.anchor-nav:where([data-rk-f60bfc]) a:where([data-rk-f60bfc]) { display: block; padding: 0.4rem 1rem; color: #64748b; text-decoration: none; font-size: 0.85rem; border-left: 2px solid transparent; margin-left: -1.5px; }
.anchor-nav:where([data-rk-f60bfc]) a.active:where([data-rk-f60bfc]) { color: #818cf8; border-left-color: #6366f1; }