@expofp/floorplan
Version:
Interactive floor plan library for expos and events
2 lines (1 loc) • 1.14 kB
JavaScript
import{jsx as f,jsxs as d}from"react/jsx-runtime";import{useMemo as g}from"react";import{uiState as p}from"../store";import u from"./useHeatmapData";const x=e=>{e.length===4&&(e=e.replace(/^#([a-f\d])([a-f\d])([a-f\d])$/i,(o,n,t,a)=>`#${n}${n}${t}${t}${a}${a}`));const r=parseInt(e.slice(1),16);return{r:r>>16&255,g:r>>8&255,b:r&255}},h=e=>{const{clicks:r,background:o}=u(e);return{heatmapBar:g(()=>{if(!p.heatmap)return null;const t=o.trim().toLowerCase();let a=255,i=255,l=255;if(t.startsWith("#")&&(t.length===7||t.length===4)){const s=x(t);a=s.r,i=s.g,l=s.b}const m=.299*a+.587*i+.114*l<170?"#fff":"#000",c=m==="#fff"?"rgba(0, 0, 0, 0.4)":"rgba(255, 255, 255, 0.4)";return d("div",{style:{display:"flex",alignItems:"center",alignSelf:"flex-start",gap:"0.2rem",minHeight:"1.8rem",marginLeft:"auto",padding:"0.2rem 0.5rem",borderRadius:"var(--border-radius-md)",background:o,color:m,textShadow:`0 0 2px ${c}`,fontWeight:"var(--font-weight-bold)",fontSize:"var(--font-size-md)",textAlign:"center"},children:[f("i",{className:"icon-eye",style:{fontSize:"var(--icon-size-xs)",textShadow:`0 0 2px ${c}`}}),r]})},[o,r])}};export default h;