44 lines
1.1 KiB
TypeScript
44 lines
1.1 KiB
TypeScript
import Link from "next/link";
|
|
import type { ReactNode } from "react";
|
|
import { ArrowIcon } from "@/components/ArrowIcon";
|
|
|
|
type Tone = "mauve" | "plum" | "white";
|
|
type Size = "sm" | "base";
|
|
|
|
const tones: Record<Tone, string> = {
|
|
mauve: "text-anouma-mauve-dark",
|
|
plum: "text-anouma-plum",
|
|
white: "text-white",
|
|
};
|
|
|
|
const sizes: Record<Size, string> = {
|
|
sm: "gap-1.5 text-sm",
|
|
base: "gap-2 text-base",
|
|
};
|
|
|
|
type ArrowLinkProps = {
|
|
href: string;
|
|
children: ReactNode;
|
|
tone?: Tone;
|
|
size?: Size;
|
|
className?: string;
|
|
};
|
|
|
|
/**
|
|
* The site's one secondary-action pattern: a text link with a small arrow
|
|
* that nudges forward on hover. Used instead of a pill button wherever the
|
|
* action isn't the single primary one on screen - keeps most CTAs feeling
|
|
* like an invitation to read on rather than another button to click.
|
|
*/
|
|
export function ArrowLink({ href, children, tone = "mauve", size = "sm", className = "" }: ArrowLinkProps) {
|
|
return (
|
|
<Link
|
|
href={href}
|
|
className={`group inline-flex items-center font-medium ${tones[tone]} ${sizes[size]} ${className}`}
|
|
>
|
|
{children}
|
|
<ArrowIcon />
|
|
</Link>
|
|
);
|
|
}
|