a2213d0169
feat(SW-3228): Move Image to design-system * Move Image to design-system * Merge branch 'master' into feat/sw-3228-move-image-to-design-system Approved-by: Linus Flood
29 lines
931 B
TypeScript
29 lines
931 B
TypeScript
import Footnote from "@scandic-hotels/design-system/Footnote"
|
|
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
|
import Image from "@scandic-hotels/design-system/Image"
|
|
|
|
import styles from "./avatar.module.css"
|
|
|
|
import type { AvatarProps } from "@/types/components/header/avatar"
|
|
|
|
export default function Avatar({ image, initials }: AvatarProps) {
|
|
let classNames = [styles.avatar]
|
|
let element = <MaterialIcon icon="person" color="Icon/Inverted" />
|
|
if (image) {
|
|
classNames.push(styles.image)
|
|
element = <Image src={image.src} alt={image.alt} width={28} height={28} />
|
|
} else if (initials) {
|
|
classNames.push(styles.initials)
|
|
element = (
|
|
<Footnote type="label" color="white" textTransform="uppercase" asChild>
|
|
<span>{initials}</span>
|
|
</Footnote>
|
|
)
|
|
}
|
|
return (
|
|
<span data-hj-suppress className={classNames.join(" ")}>
|
|
{element}
|
|
</span>
|
|
)
|
|
}
|