36 lines
1.2 KiB
TypeScript
36 lines
1.2 KiB
TypeScript
import { useSystems } from "../hooks/useStructures.js";
|
|
import { useAtlasStore } from "../store/useAtlasStore.js";
|
|
|
|
export function LayerToggle() {
|
|
const systems = useSystems();
|
|
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>
|
|
);
|
|
}
|