app/components/admin/shell-parts.tsx

Functions

Imports

It imports no other module of this repo. Imported by app/components/admin/kb-file-editor.tsx, app/components/admin/kb-form.tsx, app/components/admin/post-editor.tsx, app/routes/admin.posts.$slug.history.tsx, app/routes/admin.tsx, app/routes/workspace.inventory.lot.tsx, app/routes/workspace.runs.run.tsx, app/routes/workspace.tsx.

Source

1// What the admin and lab shells share (routes/admin.tsx, routes/workspace.tsx): the theme bootstrap, the icon frame and
2// the shell's link.
3
4import type { ReactNode } from "react";
5import { Link } from "react-router";
6import type { LinkProps } from "capsomer/react/admin-shell";
7import type { BreadcrumbProps } from "capsomer/react/breadcrumb";
8
9/**
10 * Capsomer's own one-liner (theme-switch.md), run before first paint so a remembered theme never
11 * flashes the other one. The plane's nonce is what lets the policy run it.
12 */
13export const THEME_SCRIPT =
14  'try{var t=localStorage.getItem("cap-theme");if(t==="light"||t==="dark")document.documentElement.setAttribute("data-theme",t)}catch(e){}';
15
16/* The shell's own family: a 24 box, a 1.6 stroke, drawn in currentColor (admin-shell.md, "Icons"). */
17export function Icon({ d }: { d: string }) {
18  return (
19    <svg className="cap-admin-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
20      <path d={d} />
21    </svg>
22  );
23}
24
25/**
26 * The shell's link for one plane. A link out of the plane is a document navigation: the public pages bring their own
27 * stylesheets, which would otherwise be loaded beside Capsomer's.
28 */
29export function shellLink(prefix: string) {
30  return function ShellLink({ href, children, ...rest }: LinkProps): ReactNode {
31    return (
32      <Link to={href} reloadDocument={!href.startsWith(prefix)} {...rest}>
33        {children}
34      </Link>
35    );
36  };
37}
38
39/** A breadcrumb level as a router link, for Capsomer's PageHead. */
40export const crumbLink: BreadcrumbProps["renderLink"] = ({ href, className, children }) => (
41  <Link to={href} className={className}>
42    {children}
43  </Link>
44);