0ffb40e94b
chore(SW-3145): Move Footnote to design-system * Move Footnote to design-system Approved-by: Joakim Jäderberg
30 lines
915 B
TypeScript
30 lines
915 B
TypeScript
import Footnote from "@scandic-hotels/design-system/Footnote"
|
|
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
|
|
|
import Image from "@/components/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>
|
|
)
|
|
}
|