From 88795b673d26f8491753a16e2d91dc366d852d1c Mon Sep 17 00:00:00 2001
From: Chuma McPhoy <chuma.mcphoy@scandichotels.com>
Date: Wed, 19 Jun 2024 08:03:42 +0200
Subject: [PATCH] feat: Add avatar component and get initials logic

---
 components/MyPages/Avatar/avatar.module.css | 27 +++++++++++++++++++++
 components/MyPages/Avatar/index.tsx         | 20 +++++++++++++++
 utils/user.ts                               | 10 ++++++++
 3 files changed, 57 insertions(+)
 create mode 100644 components/MyPages/Avatar/avatar.module.css
 create mode 100644 components/MyPages/Avatar/index.tsx

diff --git a/components/MyPages/Avatar/avatar.module.css b/components/MyPages/Avatar/avatar.module.css
new file mode 100644
index 000000000..0beb3c3d2
--- /dev/null
+++ b/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;
+}
diff --git a/components/MyPages/Avatar/index.tsx b/components/MyPages/Avatar/index.tsx
new file mode 100644
index 000000000..d8f97bdd3
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/utils/user.ts b/utils/user.ts
index c2ff7b8e2..9260118b0 100644
--- a/utils/user.ts
+++ b/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}`
+}