5de2a993a7
Switches out all the old icons to new ones, and moves them to the design system. The new icons are of three different types: Materialise Symbol, Nucleo, and Customized. Also adds further mapping between facilities/amenities and icons. Approved-by: Michael Zetterberg Approved-by: Erik Tiekstra
30 lines
907 B
TypeScript
30 lines
907 B
TypeScript
import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
|
|
|
|
import Image from "@/components/Image"
|
|
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
|
|
|
|
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>
|
|
)
|
|
}
|