feat: Add avatar component and get initials logic

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>
+  )
+}