/* Procedure library — a catalog page for common orthopedic procedures,
loaded from the exported OrthoVaultOS procedure-name catalog (names +
subspecialty only, no clinical content). The page reuses Nav and
Footer from the marketing site, plus the same CSS-variable theme so
dark/light + accent flow through. */
function useProcedureCatalog() {
const [state, setState] = React.useState({ loading: true, error: null, subspecialties: [] });
React.useEffect(() => {
fetch('assets/data/procedure-catalog.json')
.then((r) => { if (!r.ok) throw new Error('Failed to load catalog'); return r.json(); })
.then((data) => setState({ loading: false, error: null, subspecialties: data.subspecialties || [] }))
.catch((e) => setState({ loading: false, error: e.message, subspecialties: [] }));
}, []);
return state;
}
function ProcedureLibraryApp() {
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
const accent = t.accent || '#b91c2c';
const theme = t.theme || 'light';
const isMobile = useIsMobile();
const [filter, setFilter] = React.useState('All');
const [query, setQuery] = React.useState('');
const { loading, error, subspecialties } = useProcedureCatalog();
React.useEffect(() => {
document.body.setAttribute('data-theme', theme);
return () => { document.body.removeAttribute('data-theme'); };
}, [theme]);
const PROCEDURES = React.useMemo(() => subspecialties.flatMap((s) =>
s.procedures.map((name) => ({ name, subspecialty: s.subspecialty }))
), [subspecialties]);
const SUBSPECIALTIES = React.useMemo(() =>
['All', ...subspecialties.map((s) => s.subspecialty)],
[subspecialties]);
const filtered = PROCEDURES.filter((p) => {
if (filter !== 'All' && p.subspecialty !== filter) return false;
if (query.trim()) {
const q = query.toLowerCase();
if (!p.name.toLowerCase().includes(q) &&
!p.subspecialty.toLowerCase().includes(q)) return false;
}
return true;
});
return (
{/* Header */}
Library
Procedure{' '}
LIBRARY.
Starter templates for common orthopedic procedures. Each one becomes your own — fork it, mark up the steps, capture the pearls, attach the surgeon’s preferences.