Minimal Link Card

'use client';

import './MinimalLinkCard.css';

/**
 * MinimalLinkCard — Elegant arrow-link card for site navigation sections.
 * 
 * @param {string} title - The text label of the link.
 * @param {string} href - The destination URL.
 */
export interface MinimalLinkCardProps {
  title: string;
  href: string;
}

export function MinimalLinkCard({ title, href }: MinimalLinkCardProps) {
  return (
    <>
      <a href={href} className="link-card" data-rk-a901cf="">
        <span className="link-card__title" data-rk-a901cf="">{title}</span>
        <svg className="link-card__icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" data-rk-a901cf="">
          <path d="M5 12h14M12 5l7 7-7 7" data-rk-a901cf="" />
        </svg>
      </a>
    </>
  );
}

export default MinimalLinkCard;

/* MinimalLinkCard — ported from astro-component-kit (cards/MinimalLinkCard.astro) */

.link-card:where([data-rk-a901cf]) { 
  display: flex; justify-content: space-between; align-items: center; 
  padding: var(--sp-6, 1.5rem); 
  background: var(--c-bg-elev, rgba(255,255,255,0.03)); 
  border: 1px solid var(--c-border, rgba(255,255,255,0.1)); 
  border-radius: var(--r-md, 12px); 
  text-decoration: none; 
  color: var(--c-text-1, #fff); 
  font-weight: 600; 
  transition: 0.2s; 
}
.link-card:hover:where([data-rk-a901cf]) { 
  background: rgba(255,255,255,0.06); 
  border-color: var(--c-primary, #6366f1); 
  color: var(--c-primary-light, #818cf8); 
}
.link-card__icon:where([data-rk-a901cf]) { transition: transform 0.2s; }
.link-card:hover:where([data-rk-a901cf]) .link-card__icon:where([data-rk-a901cf]) { transform: translateX(5px); }