@lobehub/ui/es/base-ui/Spin/NetworkGlyph.mjs.map

Lobe UI is an open-source UI component library for building AIGC web apps

{"version":3,"file":"NetworkGlyph.mjs","names":[],"sources":["../../../src/base-ui/Spin/NetworkGlyph.tsx"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport { memo } from 'react';\n\nimport { styles } from './style';\n\nconst layers = [0, 1, 2] as const;\nconst unit = 25;\n\nconst nodes = layers.flatMap((layer) =>\n  layers.map((row) => ({ x: unit + layer * unit, y: unit + row * unit })),\n);\n\nconst lines = layers.slice(0, -1).flatMap((layer) =>\n  layers.flatMap((from) =>\n    layers.map((to) => ({\n      x1: unit + layer * unit,\n      x2: unit + (layer + 1) * unit,\n      y1: unit + from * unit,\n      y2: unit + to * unit,\n    })),\n  ),\n);\n\nconst particles = [0, 1, 2] as const;\n\nconst minRenderedPx = (units: number, px: number, floorPx: number) =>\n  Math.max(units, (floorPx * 100) / px);\n\nconst NetworkGlyph = memo<{ px: number }>(({ px }) => {\n  const boxStyle = {\n    '--spin-node-size': `${minRenderedPx(6, px, 2)}px`,\n    '--spin-particle-size': `${minRenderedPx(3, px, 1.5)}px`,\n    'transform': `scale(${px / 100})`,\n  } as CSSProperties;\n\n  return (\n    <span className={styles.network} style={{ height: px, width: px }}>\n      <span className={styles.networkBox} style={boxStyle}>\n        <svg className={styles.networkLines} viewBox=\"0 0 100 100\">\n          {lines.map((line) => (\n            <line key={`${line.x1}-${line.y1}-${line.y2}`} {...line} />\n          ))}\n        </svg>\n        {nodes.map(({ x, y }, index) => (\n          <i\n            className={styles.networkNode}\n            key={`${x}-${y}`}\n            style={{ animationDelay: `${index * 0.2}s`, left: x, top: y }}\n          />\n        ))}\n        {particles.map((index) => (\n          <i\n            className={styles.networkParticle}\n            key={index}\n            style={{ animationDelay: `${index * 0.6}s` }}\n          />\n        ))}\n        <b className={styles.networkCore} />\n        <u className={styles.networkRing} />\n      </span>\n    </span>\n  );\n});\n\nNetworkGlyph.displayName = 'NetworkGlyph';\n\nexport default NetworkGlyph;\n"],"mappings":";;;;AAKA,MAAM,SAAS;CAAC;CAAG;CAAG;AAAC;AACvB,MAAM,OAAO;AAEb,MAAM,QAAQ,OAAO,SAAS,UAC5B,OAAO,KAAK,SAAS;CAAE,GAAG,OAAO,QAAQ;CAAM,GAAG,OAAO,MAAM;AAAK,EAAE,CACxE;AAEA,MAAM,QAAQ,OAAO,MAAM,GAAG,EAAE,CAAC,CAAC,SAAS,UACzC,OAAO,SAAS,SACd,OAAO,KAAK,QAAQ;CAClB,IAAI,OAAO,QAAQ;CACnB,IAAI,QAAQ,QAAQ,KAAK;CACzB,IAAI,OAAO,OAAO;CAClB,IAAI,OAAO,KAAK;AAClB,EAAE,CACJ,CACF;AAEA,MAAM,YAAY;CAAC;CAAG;CAAG;AAAC;AAE1B,MAAM,iBAAiB,OAAe,IAAY,YAChD,KAAK,IAAI,OAAQ,UAAU,MAAO,EAAE;AAEtC,MAAM,eAAe,MAAsB,EAAE,SAAS;CACpD,MAAM,WAAW;EACf,oBAAoB,GAAG,cAAc,GAAG,IAAI,CAAC,EAAE;EAC/C,wBAAwB,GAAG,cAAc,GAAG,IAAI,GAAG,EAAE;EACrD,aAAa,SAAS,KAAK,IAAI;CACjC;CAEA,OACE,oBAAC,QAAD;EAAM,WAAW,OAAO;EAAS,OAAO;GAAE,QAAQ;GAAI,OAAO;EAAG;EAC9D,UAAA,qBAAC,QAAD;GAAM,WAAW,OAAO;GAAY,OAAO;GAA3C,UAAA;IACE,oBAAC,OAAD;KAAK,WAAW,OAAO;KAAc,SAAQ;KAC1C,UAAA,MAAM,KAAK,SACV,oBAAC,QAAD,EAA+C,GAAI,KAAO,GAA/C,GAAG,KAAK,GAAG,GAAG,KAAK,GAAG,GAAG,KAAK,IAAiB,CAC3D;IACE,CAAA;IACJ,MAAM,KAAK,EAAE,GAAG,KAAK,UACpB,oBAAC,KAAD;KACE,WAAW,OAAO;KAElB,OAAO;MAAE,gBAAgB,GAAG,QAAQ,GAAI;MAAI,MAAM;MAAG,KAAK;KAAE;IAC7D,GAFM,GAAG,EAAE,GAAG,GAEd,CACF;IACA,UAAU,KAAK,UACd,oBAAC,KAAD;KACE,WAAW,OAAO;KAElB,OAAO,EAAE,gBAAgB,GAAG,QAAQ,GAAI,GAAG;IAC5C,GAFM,KAEN,CACF;IACD,oBAAC,KAAD,EAAG,WAAW,OAAO,YAAc,CAAA;IACnC,oBAAC,KAAD,EAAG,WAAW,OAAO,YAAc,CAAA;GAC/B;;CACF,CAAA;AAEV,CAAC;AAED,aAAa,cAAc"}