72 lines
2.2 KiB
TypeScript
72 lines
2.2 KiB
TypeScript
import { useAtlasStore } from "../store/useAtlasStore.js";
|
||
import type { Structure } from "../lib/api.js";
|
||
|
||
export function StructureInfoPanel({
|
||
bySlug,
|
||
onClose,
|
||
}: {
|
||
bySlug: Map<string, Structure>;
|
||
// No desktop o painel é uma gaveta lateral sempre visível (não faz
|
||
// sentido "fechar", só trocar de estrutura), então esse botão só existe
|
||
// quando a página que usa o painel passa um onClose — hoje é o caso da
|
||
// bottom sheet do Atlas no mobile.
|
||
onClose?: () => void;
|
||
}) {
|
||
const selectedStructureId = useAtlasStore((s) => s.selectedStructureId);
|
||
const selectStructure = useAtlasStore((s) => s.selectStructure);
|
||
|
||
const structure = selectedStructureId
|
||
? [...bySlug.values()].find((s) => s.id === selectedStructureId)
|
||
: null;
|
||
|
||
if (!structure) {
|
||
return (
|
||
<div className="text-sm text-slate-400">
|
||
Clique em uma estrutura no modelo 3D para ver os detalhes aqui.
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function handleClose() {
|
||
selectStructure(null);
|
||
onClose?.();
|
||
}
|
||
|
||
return (
|
||
<div className="space-y-3">
|
||
<div className="flex items-start justify-between gap-3">
|
||
<div className="min-w-0">
|
||
<h2 className="text-lg font-semibold text-white leading-snug">{structure.namePt}</h2>
|
||
<p className="text-sm text-slate-400 italic">{structure.nameEn}</p>
|
||
</div>
|
||
<button
|
||
onClick={handleClose}
|
||
className="shrink-0 text-slate-400 hover:text-white text-lg leading-none p-1 -m-1"
|
||
aria-label="Fechar detalhes"
|
||
>
|
||
✕
|
||
</button>
|
||
</div>
|
||
|
||
<span
|
||
className="inline-block text-xs px-2 py-1 rounded-full"
|
||
style={{ backgroundColor: structure.system.colorHex + "33", color: structure.system.colorHex }}
|
||
>
|
||
{structure.system.namePt}
|
||
</span>
|
||
|
||
{structure.description && (
|
||
<p className="text-sm text-slate-300 leading-relaxed">{structure.description}</p>
|
||
)}
|
||
|
||
{structure.regionPath.length > 0 && (
|
||
<p className="text-xs text-slate-500">{structure.regionPath.join(" › ")}</p>
|
||
)}
|
||
|
||
{structure.synonyms.length > 0 && (
|
||
<p className="text-xs text-slate-500">Sinônimos: {structure.synonyms.join(", ")}</p>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|