feat(WEB-250): overview hero final ui

components/MyPages/Blocks/Overview/Friend/index.tsx

@@ -1,25 +1,32 @@
-import Image from "@/components/Image"
+import { _ } from "@/lib/translation"
+
+import { GoodFriend } from "@/components/Levels"
+import BiroScript from "@/components/TempDesignSystem/BiroScript"
+import Title from "@/components/TempDesignSystem/Title"
 
 import styles from "./friend.module.css"
 
-import type { FriendProps } from "@/types/components/myPages/myPage/friend"
+import type { UserProps } from "@/types/components/myPages/user"
 
-export default function Friend({ user }: FriendProps) {
+export default function Friend({ user }: UserProps) {
   return (
     <section className={styles.friend}>
-      <p className={styles.level}>Current level:</p>
-      <Image
-        alt="Good Friend"
-        className={styles.image}
-        height={70}
-        src="/_static/icons/good-friend.svg"
-        width={228}
-      />
-      <h3 className={styles.name}>{user.name}</h3>
-      <div className={styles.membershipContainer}>
-        <p className={styles.membershipId}>
-          {user.membership ? user.membership.membershipNumber : "N/A"}
-        </p>
+      <header className={styles.header}>
+        <BiroScript className={styles.levelLabel} color="pale">
+          Current level:
+        </BiroScript>
+        <GoodFriend className={styles.level} color="pale" />
+      </header>
+      <div className={styles.membership}>
+        <Title className={styles.name} color="pale" level="h3">
+          {user.name}
+        </Title>
+        <div className={styles.membershipContainer}>
+          <p className={styles.membershipId}>{_("Membership ID:")}</p>
+          <p className={styles.membershipId}>
+            {user.membership ? user.membership.membershipNumber : "N/A"}
+          </p>
+        </div>
       </div>
     </section>
   )