app/components/private-tool-icons.tsx

Functions

Imports

It imports no other module of this repo. Imported by app/components/shell-footer.tsx.

Source

1/**
2 * The footer's private-tools marks: line drawings on a 24-unit grid, one stroke weight, drawn in
3 * currentColor so the link's ink-to-purple hover reaches them. Decorative: the link
4 * text carries the name, so each is aria-hidden.
5 *
6 * Identity marks (Dustin, 2026-09-28): the lamp for Carrel, a gear for Admin, the capsid for Portal; a
7 * flask for the Lab (2026-10-14).
8 * The lock after each label says the link needs a sign-in.
9 */
10
11type IconProps = { className?: string; strokeWidth?: number };
12
13function Mark({ className, strokeWidth = 1.5, children }: IconProps & { children: React.ReactNode }) {
14  return (
15    <svg
16      className={className}
17      viewBox="0 0 24 24"
18      width="16"
19      height="16"
20      fill="none"
21      stroke="currentColor"
22      strokeWidth={strokeWidth}
23      strokeLinecap="round"
24      strokeLinejoin="round"
25      aria-hidden="true"
26      focusable="false"
27    >
28      {children}
29    </svg>
30  );
31}
32
33/** Carrel: a desk lamp, the study-carrel light. */
34export function LampIcon(props: IconProps) {
35  return (
36    <Mark {...props}>
37      <path d="M5 21h8" />
38      <path d="M9 21v-2l-3-7 5-5" />
39      <path d="M11 7l2.5-2.5 6 6L17 13z" />
40      <path d="M17 13l-1.5 2" />
41    </Mark>
42  );
43}
44
45/** Admin: a gear, eight teeth on the same grid. */
46export function GearIcon(props: IconProps) {
47  return (
48    <Mark {...props}>
49      <path d="M18.85 9.78L21.28 9.96L21.28 14.04L18.85 14.22L18.42 15.27L20 17.12L17.12 20L15.27 18.42L14.22 18.85L14.04 21.28L9.96 21.28L9.78 18.85L8.73 18.42L6.88 20L4 17.12L5.58 15.27L5.15 14.22L2.72 14.04L2.72 9.96L5.15 9.78L5.58 8.73L4 6.88L6.88 4L8.73 5.58L9.78 5.15L9.96 2.72L14.04 2.72L14.22 5.15L15.27 5.58L17.12 4L20 6.88L18.42 8.73z" />
50      <circle cx="12" cy="12" r="3" />
51    </Mark>
52  );
53}
54
55/**
56 * The sign-in lock after each label. Drawn smaller, so its stroke is 2 on the grid: at 12px that is the
57 * same 1px line the 16px marks draw at 1.5.
58 */
59export function LockIcon(props: IconProps) {
60  return (
61    <Mark {...props}>
62      <rect x="5" y="11" width="14" height="10" rx="1.5" />
63      <path d="M8 11V8a4 4 0 0 1 8 0v3" />
64      <path d="M12 15v2" />
65    </Mark>
66  );
67}
68
69/** Portal: an icosahedron in outline, the shape of a phage capsid. */
70export function CapsidIcon(props: IconProps) {
71  return (
72    <Mark {...props}>
73      <path d="M12 2.5l8.2 4.75v9.5L12 21.5l-8.2-4.75v-9.5z" />
74      <path d="M12 2.5L7.5 9.5h9zM7.5 9.5L3.8 16.75M16.5 9.5l3.7 7.25M7.5 9.5L12 16.5l4.5-7M12 16.5v5M12 16.5l-8.2.25M12 16.5l8.2.25" />
75    </Mark>
76  );
77}
78
79/** Lab: a conical flask, the bench. */
80export function FlaskIcon(props: IconProps) {
81  return (
82    <Mark {...props}>
83      <path d="M9 3h6" />
84      <path d="M10 3v6.5L4.6 18.6A1.6 1.6 0 0 0 6 21h12a1.6 1.6 0 0 0 1.4-2.4L14 9.5V3" />
85      <path d="M7.2 15h9.6" />
86    </Mark>
87  );
88}