feat(WEB-220): label translations

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

@@ -1,19 +1,19 @@
-import { _ } from "@/lib/translation"
-
 import { GoodFriend } from "@/components/Levels"
 import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
 import Title from "@/components/TempDesignSystem/Text/Title"
+import { getIntl } from "@/i18n"
 
 import styles from "./friend.module.css"
 
 import type { UserProps } from "@/types/components/myPages/user"
 
-export default function Friend({ user }: UserProps) {
+export default async function Friend({ user }: UserProps) {
+  const { formatMessage } = await getIntl()
   return (
     <section className={styles.friend}>
       <header className={styles.header}>
         <BiroScript className={styles.levelLabel} color="pale">
-          Current level:
+          {formatMessage({ id: "Current level" })}:
         </BiroScript>
         <GoodFriend className={styles.level} color="pale" />
       </header>
@@ -22,7 +22,9 @@ export default function Friend({ user }: UserProps) {
           {user.name}
         </Title>
         <div className={styles.membershipContainer}>
-          <p className={styles.membershipId}>{_("Membership ID:")}</p>
+          <p className={styles.membershipId}>
+            {formatMessage({ id: "Membership ID" })}:
+          </p>
           <p className={styles.membershipId}>
             {user.membership ? user.membership.membershipNumber : "N/A"}
           </p>