@lobehub/ui
Version:
Lobe UI is an open-source UI component library for building AIGC web apps
1 lines • 1.78 kB
Source Map (JSON)
{"version":3,"file":"Spotlight.mjs","names":[],"sources":["../../../src/awesome/Spotlight/Spotlight.tsx"],"sourcesContent":["'use client';\n\nimport { cx, useThemeMode } from 'antd-style';\nimport { memo, useMemo } from 'react';\n\nimport { styles } from './style';\nimport type { SpotlightProps } from './type';\nimport { useMouseOffset } from './useMouseOffset';\n\nconst Spotlight = memo<SpotlightProps>(({ className, size = 64, ...properties }) => {\n const [offset, outside, reference] = useMouseOffset();\n const { isDarkMode } = useThemeMode();\n\n const cssVariables = useMemo<Record<string, string>>(\n () => ({\n '--spotlight-opacity': outside ? '0' : '0.1',\n '--spotlight-size': `${size}px`,\n '--spotlight-x': `${offset?.x ?? 0}px`,\n '--spotlight-y': `${offset?.y ?? 0}px`,\n }),\n [offset, size, outside],\n );\n\n const spotlightStyle = isDarkMode\n ? outside\n ? styles.spotlightDarkOutside\n : styles.spotlightDark\n : outside\n ? styles.spotlightLightOutside\n : styles.spotlightLight;\n\n return (\n <div\n className={cx(spotlightStyle, className)}\n ref={reference}\n style={cssVariables}\n {...properties}\n />\n );\n});\n\nSpotlight.displayName = 'Spotlight';\n\nexport default Spotlight;\n"],"mappings":";;;;;;;;;AASA,MAAM,YAAY,MAAsB,EAAE,WAAW,OAAO,IAAI,GAAG,iBAAiB;CAClF,MAAM,CAAC,QAAQ,SAAS,aAAa,gBAAgB;CACrD,MAAM,EAAE,eAAe,cAAc;CAErC,MAAM,eAAe,eACZ;EACL,uBAAuB,UAAU,MAAM;EACvC,oBAAoB,GAAG,KAAK;EAC5B,iBAAiB,GAAG,QAAQ,KAAK,EAAE;EACnC,iBAAiB,GAAG,QAAQ,KAAK,EAAE;EACpC,GACD;EAAC;EAAQ;EAAM;EAAQ,CACxB;AAUD,QACE,oBAAC;EACC,WAAW,GAVQ,aACnB,UACE,OAAO,uBACP,OAAO,gBACT,UACE,OAAO,wBACP,OAAO,gBAIqB,UAAU;EACxC,KAAK;EACL,OAAO;EACP,GAAI;GACJ;EAEJ;AAEF,UAAU,cAAc;AAExB,wBAAe"}