60 lines
1.9 KiB
JavaScript
60 lines
1.9 KiB
JavaScript
import cyclone from "@/assets/cyclone.png";
|
|
import anticyclone from "@/assets/anticyclone.png";
|
|
import updraft from "@/assets/updraft.png";
|
|
import waterwapor from "@/assets/waterwapor.png";
|
|
|
|
function EntityLegend() {
|
|
return (
|
|
<div className="entity-legend" style={{ bottom: 116 }}>
|
|
<div className="entity-legend-item">
|
|
<div style={{ fontWeight: 800, color: "#04fafc" }}>- - - -</div>
|
|
<div className="entity-legend-item-name">Rossby wave path</div>
|
|
</div>
|
|
<div className="entity-legend-item">
|
|
<div>
|
|
<img src={anticyclone} width={32} />
|
|
</div>
|
|
<div className="entity-legend-item-name">anticyclone</div>
|
|
</div>
|
|
<div className="entity-legend-item">
|
|
<div>
|
|
<img src={updraft} width={32} height={32} />
|
|
</div>
|
|
<div className="entity-legend-item-name">updraft</div>
|
|
</div>
|
|
<div className="entity-legend-item">
|
|
<div
|
|
style={{ width: 32, height: 32, backgroundColor: "#6080b0" }}
|
|
></div>
|
|
<div className="entity-legend-item-name">barotroptic structure</div>
|
|
</div>
|
|
<div className="entity-legend-item">
|
|
<div>
|
|
<img src={cyclone} width={32} />
|
|
</div>
|
|
<div className="entity-legend-item-name">cyclone</div>
|
|
</div>
|
|
<div className="entity-legend-item">
|
|
<div
|
|
style={{
|
|
width: 48,
|
|
height: 32,
|
|
borderRadius: "999px",
|
|
backgroundColor: "#8d5555",
|
|
marginLeft: -16,
|
|
}}
|
|
></div>
|
|
<div className="entity-legend-item-name">warming</div>
|
|
</div>
|
|
{/* <div className="entity-legend-item">
|
|
<div>
|
|
<img src={waterwapor} width={32} />
|
|
</div>
|
|
<div className="entity-legend-item-name">water wapor path</div>
|
|
</div> */}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default EntityLegend;
|