feat: Add avatar component and get initials logic

components/MyPages/Avatar/avatar.module.css

@@ -0,0 +1,27 @@
+.avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+  overflow: hidden;
+  cursor: pointer;
+  width: 35px;
+  height: 35px;
+  border-radius: 100%;
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+.avatarInitialsText {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--Theme-Primary-Dark-Surface-Normal);
+  color: var(--Theme-Primary-Dark-On-Surface-Text);
+  font-size: var(--typography-Caption-Bold-fontSize);
+  font-family: var(--typography-Body-Regular-fontFamily);
+  font-weight: var(--typography-Caption-Bold-fontWeight);
+  line-height: 150%;
+  letter-spacing: 0.096px;
+}

components/MyPages/Avatar/index.tsx

@@ -0,0 +1,20 @@
+import { getInitials } from "@/utils/user"
+
+import styles from "./avatar.module.css"
+
+import { User } from "@/types/user"
+
+export default function Avatar({
+  firstName,
+  lastName,
+}: {
+  firstName: User["firstName"]
+  lastName: User["lastName"]
+}) {
+  const initials = getInitials(firstName, lastName)
+  return (
+    <span className={styles.avatar}>
+      <span className={styles.avatarInitialsText}>{initials}</span>
+    </span>
+  )
+}

utils/user.ts

@@ -6,3 +6,13 @@ export function getMembership(memberships: User["memberships"]) {
       membership.membershipType.toLowerCase() === "guestpr" || "scandicfriend's"
   )
 }
+
+export function getInitials(
+  firstName: User["firstName"],
+  lastName: User["lastName"]
+) {
+  if (!firstName || !lastName) return null
+  const firstInitial = firstName.charAt(0).toUpperCase()
+  const lastInitial = lastName.charAt(0).toUpperCase()
+  return `${firstInitial}${lastInitial}`
+}