@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,GAAA,EAAK,KAAA,EAAO,QAAO,KAAmB;AAClE,EAAA,MAAM,MAAA,GAAS,UAAA,CAAW,SAAA,EAAW,KAAA,EAAO,MAAM,CAAA;AAElD,EAAA,2BAAQ,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,KAAA,EAAO,KAAU,GAAA,EAAU,CAAA;AAC3D;AAEA,MAAM,YAAY,CAAC,KAAA,EAAsB,KAAA,GAA8B,CAAA,EAAG,SAAgC,CAAA,KAAM;AAC9G,EAAA,OAAO;AAAA,IACL,OAAO,GAAA,CAAI;AAAA,MACT,kBAAA,CAAmB,KAAA,EAAO,KAAA,EAAO,CAAC,GAAA,MAAS;AAAA,QACzC,KAAA,EAAO,KAAA,CAAM,OAAA,CAAQ,GAAG;AAAA,OAC1B,CAAE,CAAA;AAAA,MACF,kBAAA,CAAmB,KAAA,EAAO,MAAA,EAAQ,CAAC,GAAA,MAAS;AAAA,QAC1C,MAAA,EAAQ,KAAA,CAAM,OAAA,CAAQ,GAAG;AAAA,OAC3B,CAAE,CAAA;AAAA,MACF,EAAE,YAAA,EAAc,KAAA,CAAM,KAAA,CAAM,OAAO,MAAA;AAAO,KAC3C;AAAA,GACH;AACF,CAAA;;;;"}