55 lines
1.9 KiB
TypeScript
55 lines
1.9 KiB
TypeScript
import { useEffect } from 'react';
|
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
// @ts-ignore -- plain ES module, no .d.ts; imported for its side effect
|
|
// of defining the custom element.
|
|
import '../meta-service-menu.js';
|
|
|
|
/**
|
|
* ServiceNav — the neighbouring meta-* services, as a burger menu.
|
|
*
|
|
* Since meta-discovery v1 this is a thin wrapper around <meta-service-menu>,
|
|
* a framework-free custom element shared by every meta-* UI (see
|
|
* scripts/check-mirrors.sh). The old implementation was ~165 lines of React
|
|
* that existed in four near-identical copies and polled meta-core's
|
|
* /api/services; the element polls this service's own /api/neighbors instead,
|
|
* so the nav still renders when meta-core is down.
|
|
*
|
|
* The element lives in shadow DOM and cannot see this app's CSS variables, so
|
|
* the four --mm-nav-* tokens below map our palette onto it.
|
|
*/
|
|
|
|
declare global {
|
|
// eslint-disable-next-line @typescript-eslint/no-namespace
|
|
namespace JSX {
|
|
interface IntrinsicElements {
|
|
'meta-service-menu': React.DetailedHTMLProps<
|
|
React.HTMLAttributes<HTMLElement>,
|
|
HTMLElement
|
|
> & { current?: string; endpoint?: string; label?: string };
|
|
}
|
|
}
|
|
}
|
|
|
|
function ServiceNav() {
|
|
useEffect(() => {
|
|
// Import above is for the side effect of defining the element; this
|
|
// keeps bundlers from tree-shaking it away in production builds.
|
|
}, []);
|
|
|
|
return (
|
|
<>
|
|
<meta-service-menu current="meta-sort" />
|
|
<style>{`
|
|
meta-service-menu {
|
|
--mm-nav-fg: var(--text-primary, #e0e0e0);
|
|
--mm-nav-bg: var(--bg-tertiary, var(--bg-secondary, #1a1a2e));
|
|
--mm-nav-border: var(--border-color, rgba(255,255,255,0.14));
|
|
--mm-nav-accent: var(--accent-primary, #4ecdc4);
|
|
}
|
|
`}</style>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default ServiceNav;
|