Signed-off-by: Rodrigo Bertoldo de Sousa Martins <rodrigo@martinsevieira.adv.br>
44 lines
1.6 KiB
TypeScript
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>
|
|
);
|
|
}
|