@lobehub/ui/es/awesome/SpotlightCard/SpotlightCard.mjs.map

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

{"version":3,"file":"SpotlightCard.mjs","names":["Grid","SpotlightCardItem"],"sources":["../../../src/awesome/SpotlightCard/SpotlightCard.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { memo, useEffect, useMemo, useRef } from 'react';\n\nimport Grid from '@/Grid';\n\nimport SpotlightCardItem from './SpotlightCardItem';\nimport { CHILDREN_CLASSNAME, styles } from './style';\nimport type { SpotlightCardProps } from './type';\n\nconst SpotlightCard = memo<SpotlightCardProps>(\n  ({\n    items,\n    renderItem: Content,\n    maxItemWidth,\n    className,\n    columns = 3,\n    gap = '1em',\n    style,\n    size = 800,\n    borderRadius = 12,\n    spotlight = true,\n    ...rest\n  }) => {\n    const cssVariables = useMemo<Record<string, string>>(\n      () => ({\n        '--spotlight-card-border-radius': `${borderRadius}px`,\n        '--spotlight-card-size': `${size}px`,\n      }),\n      [borderRadius, size],\n    );\n    const ref = useRef<HTMLDivElement>(null);\n\n    useEffect(() => {\n      if (!ref.current) return;\n      if (!spotlight) return;\n      const fn = (e: MouseEvent) => {\n        for (const card of document.querySelectorAll(`.${CHILDREN_CLASSNAME}`)) {\n          const rect = card.getBoundingClientRect(),\n            x = e.clientX - rect.left,\n            y = e.clientY - rect.top;\n\n          (card as HTMLDivElement).style.setProperty('--mouse-x', `${x}px`);\n          (card as HTMLDivElement).style.setProperty('--mouse-y', `${y}px`);\n        }\n      };\n      ref.current.addEventListener('mousemove', fn);\n\n      return () => {\n        ref.current?.removeEventListener('mousemove', fn);\n      };\n    }, []);\n\n    return (\n      <Grid\n        className={cx(styles.container, styles.grid, className)}\n        gap={gap}\n        maxItemWidth={maxItemWidth}\n        ref={ref}\n        rows={columns}\n        style={{\n          ...cssVariables,\n          ...style,\n        }}\n        {...rest}\n      >\n        {items.map((item, index) => {\n          return (\n            <SpotlightCardItem\n              borderRadius={borderRadius}\n              className={CHILDREN_CLASSNAME}\n              key={index}\n              size={size}\n            >\n              <Content {...item} />\n            </SpotlightCardItem>\n          );\n        })}\n      </Grid>\n    );\n  },\n);\n\nSpotlightCard.displayName = 'SpotlightCard';\n\nexport default SpotlightCard;\n"],"mappings":";;;;;;;;;;AAWA,MAAM,gBAAgB,MACnB,EACC,OACA,YAAY,SACZ,cACA,WACA,UAAU,GACV,MAAM,OACN,OACA,OAAO,KACP,eAAe,IACf,YAAY,MACZ,GAAG,WACC;CACJ,MAAM,eAAe,eACZ;EACL,kCAAkC,GAAG,aAAa;EAClD,yBAAyB,GAAG,KAAK;EAClC,GACD,CAAC,cAAc,KAAK,CACrB;CACD,MAAM,MAAM,OAAuB,KAAK;AAExC,iBAAgB;AACd,MAAI,CAAC,IAAI,QAAS;AAClB,MAAI,CAAC,UAAW;EAChB,MAAM,MAAM,MAAkB;AAC5B,QAAK,MAAM,QAAQ,SAAS,iBAAiB,IAAI,qBAAqB,EAAE;IACtE,MAAM,OAAO,KAAK,uBAAuB,EACvC,IAAI,EAAE,UAAU,KAAK,MACrB,IAAI,EAAE,UAAU,KAAK;AAEvB,IAAC,KAAwB,MAAM,YAAY,aAAa,GAAG,EAAE,IAAI;AACjE,IAAC,KAAwB,MAAM,YAAY,aAAa,GAAG,EAAE,IAAI;;;AAGrE,MAAI,QAAQ,iBAAiB,aAAa,GAAG;AAE7C,eAAa;AACX,OAAI,SAAS,oBAAoB,aAAa,GAAG;;IAElD,EAAE,CAAC;AAEN,QACE,oBAACA;EACC,WAAW,GAAG,OAAO,WAAW,OAAO,MAAM,UAAU;EAClD;EACS;EACT;EACL,MAAM;EACN,OAAO;GACL,GAAG;GACH,GAAG;GACJ;EACD,GAAI;YAEH,MAAM,KAAK,MAAM,UAAU;AAC1B,UACE,oBAACC;IACe;IACd,WAAW;IAEL;cAEN,oBAAC,WAAQ,GAAI,OAAQ;MAHhB,MAIa;IAEtB;GACG;EAGZ;AAED,cAAc,cAAc;AAE5B,4BAAe"}