Files
anatomia/frontend/src/components/LayerToggle.tsx
T
2026-09-18 14:18:33 -03:00

44 lines
1.6 KiB
TypeScript

import { useSystems } from "../hooks/useStructures.js";
import { useAtlasStore } from "../store/useAtlasStore.js";
// "Planos e Linhas de Referência" (sistema "referencias") tem sua própria
// seção dedicada agora — Planos e Eixos, com boneco + setas + glossário
// interativo, bem mais didática que a malha real do Z-Anatomy pra isso.
// Escondido aqui (não removido do banco) pra não duplicar/confundir com a
// página nova.
const HIDDEN_SYSTEM_SLUGS = new Set(["referencias"]);
export function LayerToggle() {
const allSystems = useSystems();
const systems = allSystems.filter((sys) => !HIDDEN_SYSTEM_SLUGS.has(sys.slug));
const visibleSystems = useAtlasStore((s) => s.visibleSystems);
const toggleSystem = useAtlasStore((s) => s.toggleSystem);
return (
<div className="space-y-1.5">
<h3 className="text-xs uppercase tracking-wide text-slate-400 mb-2">Camadas</h3>
{systems.map((sys) => (
<label
key={sys.slug}
className="flex items-center gap-2 text-sm cursor-pointer select-none rounded px-2 py-1 hover:bg-white/5"
>
<input
type="checkbox"
checked={visibleSystems.has(sys.slug)}
onChange={() => toggleSystem(sys.slug)}
className="accent-accent"
/>
<span
className="inline-block w-2.5 h-2.5 rounded-full"
style={{ backgroundColor: sys.colorHex }}
/>
<span>{sys.namePt}</span>
{sys._count && (
<span className="ml-auto text-xs text-slate-500">{sys._count.structures}</span>
)}
</label>
))}
</div>
);
}