@grafana/ui/dist/esm/components/UsersIndicator/Avatar.mjs.map

Grafana Components Library

{"version":3,"file":"Avatar.mjs","sources":["../../../../src/components/UsersIndicator/Avatar.tsx"],"sourcesContent":["import { css } from '@emotion/css';\n\nimport { GrafanaTheme2, ThemeSpacingTokens } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { getResponsiveStyle, ResponsiveProp } from '../Layout/utils/responsiveness';\n\nexport interface AvatarProps {\n  src: string;\n  alt: string;\n  width?: ResponsiveProp<ThemeSpacingTokens>;\n  height?: ResponsiveProp<ThemeSpacingTokens>;\n}\nexport const Avatar = ({ src, alt, width, height }: AvatarProps) => {\n  const styles = useStyles2(getStyles, width, height);\n\n  return <img className={styles.image} src={src} alt={alt} />;\n};\n\nconst getStyles = (theme: GrafanaTheme2, width: AvatarProps['width'] = 3, height: AvatarProps['height'] = 3) => {\n  return {\n    image: css([\n      getResponsiveStyle(theme, width, (val) => ({\n        width: theme.spacing(val),\n      })),\n      getResponsiveStyle(theme, height, (val) => ({\n        height: theme.spacing(val),\n      })),\n      { borderRadius: theme.shape.radius.circle },\n    ]),\n  };\n};\n"],"names":[],"mappings":";;;;;AAaO,MAAM,SAAS,CAAC,EAAE,KAAK,GAAK,EAAA,KAAA,EAAO,QAA0B,KAAA;AAClE,EAAA,MAAM,MAAS,GAAA,UAAA,CAAW,SAAW,EAAA,KAAA,EAAO,MAAM,CAAA;AAElD,EAAA,2BAAQ,KAAI,EAAA,EAAA,SAAA,EAAW,MAAO,CAAA,KAAA,EAAO,KAAU,GAAU,EAAA,CAAA;AAC3D;AAEA,MAAM,YAAY,CAAC,KAAA,EAAsB,KAA8B,GAAA,CAAA,EAAG,SAAgC,CAAM,KAAA;AAC9G,EAAO,OAAA;AAAA,IACL,OAAO,GAAI,CAAA;AAAA,MACT,kBAAmB,CAAA,KAAA,EAAO,KAAO,EAAA,CAAC,GAAS,MAAA;AAAA,QACzC,KAAA,EAAO,KAAM,CAAA,OAAA,CAAQ,GAAG;AAAA,OACxB,CAAA,CAAA;AAAA,MACF,kBAAmB,CAAA,KAAA,EAAO,MAAQ,EAAA,CAAC,GAAS,MAAA;AAAA,QAC1C,MAAA,EAAQ,KAAM,CAAA,OAAA,CAAQ,GAAG;AAAA,OACzB,CAAA,CAAA;AAAA,MACF,EAAE,YAAA,EAAc,KAAM,CAAA,KAAA,CAAM,OAAO,MAAO;AAAA,KAC3C;AAAA,GACH;AACF,CAAA;;;;"}