UNPKG

@helpwave/hightide

Version:

helpwave's component and theming library

1 lines 2.15 kB
{"version":3,"sources":["../../src/components/Avatar.tsx"],"sourcesContent":["import Image from 'next/image'\nimport clsx from 'clsx'\n\nexport const avtarSizeList = ['tiny', 'small', 'medium', 'large'] as const\nexport type AvatarSize = typeof avtarSizeList[number]\nexport const avatarSizeMapping: Record<AvatarSize, number> = {\n tiny: 24,\n small: 32,\n medium: 48,\n large: 64\n}\n\nexport type AvatarProps = {\n avatarUrl: string,\n alt: string,\n size?: AvatarSize,\n className?: string,\n}\n\n/**\n * A component for showing a profile picture\n */\nconst Avatar = ({ avatarUrl, alt, size = 'medium', className = '' }: AvatarProps) => {\n // TODO remove later\n avatarUrl = 'https://cdn.helpwave.de/boringavatar.svg'\n\n const avtarSize = {\n tiny: 24,\n small: 32,\n medium: 48,\n large: 64,\n }[size]\n\n const style = {\n width: avtarSize + 'px',\n height: avtarSize + 'px',\n maxWidth: avtarSize + 'px',\n maxHeight: avtarSize + 'px',\n minWidth: avtarSize + 'px',\n minHeight: avtarSize + 'px',\n }\n\n return (\n // TODO transparent or white background later\n <div className={clsx(`rounded-full bg-primary`, className)} style={style}>\n <Image\n className=\"rounded-full border border-gray-200\"\n style={style}\n src={avatarUrl}\n alt={alt}\n width={avtarSize}\n height={avtarSize}\n />\n </div>\n )\n}\n\nexport { Avatar }\n"],"mappings":";AAAA,OAAO,WAAW;AAClB,OAAO,UAAU;AA4CX;AA1CC,IAAM,gBAAgB,CAAC,QAAQ,SAAS,UAAU,OAAO;AAEzD,IAAM,oBAAgD;AAAA,EAC3D,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT;AAYA,IAAM,SAAS,CAAC,EAAE,WAAW,KAAK,OAAO,UAAU,YAAY,GAAG,MAAmB;AAEnF,cAAY;AAEZ,QAAM,YAAY;AAAA,IAChB,MAAM;AAAA,IACN,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,EACT,EAAE,IAAI;AAEN,QAAM,QAAQ;AAAA,IACZ,OAAO,YAAY;AAAA,IACnB,QAAQ,YAAY;AAAA,IACpB,UAAU,YAAY;AAAA,IACtB,WAAW,YAAY;AAAA,IACvB,UAAU,YAAY;AAAA,IACtB,WAAW,YAAY;AAAA,EACzB;AAEA;AAAA;AAAA,IAEE,oBAAC,SAAI,WAAW,KAAK,2BAA2B,SAAS,GAAG,OAC1D;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV;AAAA,QACA,KAAK;AAAA,QACL;AAAA,QACA,OAAO;AAAA,QACP,QAAQ;AAAA;AAAA,IACV,GACF;AAAA;AAEJ;","names":[]}