feat(SW-184): added main components for new header

components/Header/MainMenu/User/Avatar/avatar.module.css

@@ -0,0 +1,16 @@
+.avatar {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  border-radius: 50%;
+  width: 2rem;
+  height: 2rem;
+  background-color: var(--Main-Grey-40);
+}
+
+.initials {
+  font-size: 0.75rem;
+  color: var(--Base-Text-Inverted);
+  background-color: var(--Scandic-Peach-70);
+}

components/Header/MainMenu/User/Avatar/avatar.ts

@@ -0,0 +1,6 @@
+import { ImageProps } from "next/image"
+
+export interface AvatarProps {
+  image?: ImageProps
+  initials?: string
+}

components/Header/MainMenu/User/Avatar/index.tsx

@@ -0,0 +1,19 @@
+import { PersonIcon } from "@/components/Icons"
+import Image from "@/components/Image"
+
+import { AvatarProps } from "./avatar"
+
+import styles from "./avatar.module.css"
+
+export default function Avatar({ image, initials }: AvatarProps) {
+  let classNames = [styles.avatar]
+  let element = <PersonIcon color="white" />
+  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 = <span>{initials}</span>
+  }
+  return <span className={classNames.join(" ")}>{element}</span>
+}

components/Header/MainMenu/User/index.tsx

@@ -0,0 +1,16 @@
+import Link from "next/link"
+
+import Avatar from "./Avatar"
+
+import styles from "./user.module.css"
+
+export default function User() {
+  return (
+    <div className={styles.user}>
+      <Link href="#" className={styles.link}>
+        <Avatar />
+        Log in/Join
+      </Link>
+    </div>
+  )
+}

components/Header/MainMenu/User/user.module.css

@@ -0,0 +1,12 @@
+.user {
+}
+
+.link {
+  display: flex;
+  gap: var(--Spacing-x1);
+  align-items: center;
+  font-family: var(--typography-Body-Bold-fontFamily);
+  font-weight: 600;
+  color: var(--Base-Text-High-contrast);
+  text-decoration: none;
+}