Link card

import * as React from "react";
import Link from "next/link";
import { ArrowUpRightIcon } from "lucide-react";
import { cn } from "@/lib/utils";

type LinkCardProps = Omit<React.ComponentProps<typeof Link>, "title" | "children"> & {
  /** The card heading. */
  title: string;
  /** One or two lines under the title. */
  description?: string;
  /** Optional icon above the title, 16px, foreground. */
  icon?: React.ReactNode;
  /** Open in a new tab with rel="noopener noreferrer" and a screen reader note. */
  external?: boolean;
};

/**
 * A card that is one link. Title, description and an arrow top right.
 * The arrow and a soft fill are the hover signal; focus draws a ring around the whole card.
 */
export function LinkCard({ title, description, icon, external = false, className, ...props }: LinkCardProps) {
  return (
    <Link
      data-slot="link-card"
      target={external ? "_blank" : undefined}
      rel={external ? "noopener noreferrer" : undefined}
      className={cn(
        "group/link-card relative flex flex-col gap-1 rounded-lg border bg-card p-4 text-sm transition-colors duration-100 ease-out outline-none hover:bg-accent/40 focus-visible:ring-2 focus-visible:ring-ring/50",
        className,
      )}
      {...props}
    >
      <ArrowUpRightIcon
        aria-hidden="true"
        className="absolute top-3 right-3 size-4 text-muted-foreground transition-colors duration-100 ease-out group-hover/link-card:text-foreground group-focus-visible/link-card:text-foreground"
      />
      {icon && (
        <span aria-hidden="true" className="mb-2 inline-flex text-foreground [&_svg]:size-4">
          {icon}
        </span>
      )}
      <span className="pr-6 font-medium text-foreground">{title}</span>
      {description && <span className="pr-6 text-muted-foreground">{description}</span>}
      {external && <span className="sr-only">(opens in a new tab)</span>}
    </Link>
  );
}