1
import { ChevronRight } from "lucide-react";
2
import type { ReactNode } from "react";
3
import { Link } from "react-router";
4
 
5
interface NavCardProps {
6
  to: string;
7
  title: string;
8
  description: string;
9
  // Optional trailing slot — used by the hub to surface a small status
10
  // chip ("3 sessions", "2 connected apps") without dropping the card
11
  // primitive's clean title/description rhythm.
12
  meta?: ReactNode;
13
}
14
 
15
// Shared affordance for the /account hub and related settings hubs.
16
// Title, helper text, and ChevronRight signal navigation without
17
// competing with primary actions on the destination page.
18
export const NavCard = ({ to, title, description, meta }: NavCardProps) => (
19
  <Link
20
    to={to}
21
    className="group flex items-center justify-between gap-4 rounded-2xl border border-zinc-800/60 bg-zinc-900/50 p-5 transition-colors hover:border-zinc-700/60 hover:bg-zinc-800/50 sm:p-6"
22
  >
23
    <div className="min-w-0 flex-1">
24
      <h2 className="text-lg font-semibold text-zinc-100">{title}</h2>
25
      <p className="mt-1 text-xs text-zinc-500">{description}</p>
26
    </div>
27
    <div className="flex shrink-0 items-center gap-3">
28
      {meta ? <span className="text-xs text-zinc-500">{meta}</span> : null}
29
      <ChevronRight
30
        className="h-5 w-5 shrink-0 text-zinc-500 transition-transform duration-200 group-hover:translate-x-0.5 group-hover:text-zinc-300"
31
        aria-hidden="true"
32
      />
33
    </div>
34
  </Link>
35
);