44 lines
1.5 KiB
TypeScript
44 lines
1.5 KiB
TypeScript
import Link from "next/link";
|
|
|
|
/**
|
|
* BackLink — small "← Page" navigation cue that sits above a page's
|
|
* `<h1 className="accent-rule">` heading.
|
|
*
|
|
* Why this exists
|
|
* ---------------
|
|
* The pattern was originally written inline on /team and /dashboard/new
|
|
* as `<Link className="inline-flex …"><span>←</span> Title</Link>`.
|
|
* That's wrong because `.accent-rule` (defined in globals.css) sets
|
|
* `display: inline-block` on the H1 — so an inline-flex link followed by
|
|
* an inline-block H1 are both inline-level, and end up on the same
|
|
* baseline whenever there's horizontal room for them. The `mb-4` on the
|
|
* link does nothing because vertical margin between inline boxes
|
|
* doesn't push siblings to a new line.
|
|
*
|
|
* Solving it: this component renders the link as a block-level flex
|
|
* container with `w-fit` so it shrinks to its content (and its hover
|
|
* area doesn't span the gutter). The trailing block element below sits
|
|
* cleanly on its own line.
|
|
*
|
|
* Use it whenever a page has a back-link above an `accent-rule` H1.
|
|
* The two prior callsites (/team and /dashboard/new) have been
|
|
* migrated; new pages should just use this directly.
|
|
*/
|
|
export function BackLink({
|
|
href,
|
|
label,
|
|
}: {
|
|
href: string;
|
|
label: string;
|
|
}) {
|
|
return (
|
|
<Link
|
|
href={href}
|
|
className="flex w-fit items-center gap-1.5 mb-4 text-xs font-medium text-text-muted hover:text-text-primary transition-colors"
|
|
>
|
|
<span aria-hidden="true">←</span>
|
|
<span>{label}</span>
|
|
</Link>
|
|
);
|
|
}
|