app/components/filter-link.tsx

Functions

Imports

It imports app/lib/inter-width.ts. Imported by app/routes/blog._index.tsx.

Source

1import type { CSSProperties } from "react";
2import { Link } from "react-router";
3import { interWidthEm } from "~/lib/inter-width";
4
5/** One link in a `.list-filter` row: its name box is Inter's width, whichever face draws it. */
6export function FilterLink({
7  to,
8  label,
9  count,
10  active,
11  title,
12}: {
13  to: string;
14  label: string;
15  count?: number;
16  active: boolean;
17  title?: string;
18}) {
19  const width = { "--name-w": `${interWidthEm(label, active ? 600 : 400)}em` } as CSSProperties;
20  return (
21    <Link to={to} aria-current={active ? "true" : undefined} title={title}>
22      <span className="filter-name" style={width}>
23        {label}
24      </span>
25      {count === undefined ? null : <span className="filter-count">{count}</span>}
26    </Link>
27  );
28}