// --- GLOBALS FOR ICONS ---
let globalIconsCache = null;
let iconFetchPromise = null;
// --- ICONS COMPONENT ---
const Icon = ({ name, size = 20, className = "" }) => {
const [dynamicIcons, setDynamicIcons] = useState(globalIconsCache || {});
useEffect(() => {
if (globalIconsCache) return;
if (!iconFetchPromise) {
iconFetchPromise = fetch('data/icons.json')
.then(res => res.json())
.catch(err => {
console.warn("Failed to load icons.json:", err);
return {};
});
}
iconFetchPromise.then(data => {
globalIconsCache = data;
setDynamicIcons(data);
});
}, []);
const fallbackIcons = {
camera: <>,
target: <>,
sun: <>,
moon: <>,
info: <>,
x: <>,
menu: <>,
map: <>,
compass: <>,
play: <>,
pause: <>,
calendar: <>,
eye: <>,
eyeOff: <>,
viewfinder: <>,
calculator: <>,
aperture: <>,
locate: <>,
check: <>,
mountain: <>,
alertTriangle: <>,
stars: <>,
search: <>,
link: <>,
smartphone: <>,
streetView: <>,
cloud: <>,
clockArrow: <>,
grid: <>,
download: <>,
copy: <>,
navigation: <>,
bookmark: <>
};
const iconContent = dynamicIcons[name] || fallbackIcons[name];
if (!iconContent) {
return ;
}
if (typeof iconContent === 'string') {
return ;
}
return (
);
};
const getCoverProps = (val) => {
if (val === null || val === undefined || isNaN(val)) return { c: "text-slate-500 bg-slate-100 border-slate-200", l: "..." };
if (val > 70) return { c: "text-rose-700 bg-rose-100 border-rose-200", l: "Cldy" };
if (val > 30) return { c: "text-amber-700 bg-amber-100 border-amber-200", l: "Mix" };
return { c: "text-emerald-700 bg-emerald-100 border-emerald-200", l: "Clr" };
};
const HorizonBadge = ({ coverObj }) => {
if (!coverObj || typeof coverObj !== 'object') return null;
const low = getCoverProps(coverObj.low);
const mid = getCoverProps(coverObj.mid);
const high = getCoverProps(coverObj.high);
return (
50:{low.l}
100:{mid.l}
200:{high.l}
);
};