feat(WEB-220): label translations

components/MyPages/Blocks/Overview/Stats/NextLevel/index.tsx

@@ -1,7 +1,6 @@
-import { _ } from "@/lib/translation"
-
 import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
 import Title from "@/components/TempDesignSystem/Text/Title"
+import { getIntl } from "@/i18n"
 
 import Label from "../Label"
 
@@ -9,13 +8,14 @@ import styles from "./nextLevel.module.css"
 
 import type { UserProps } from "@/types/components/myPages/user"
 
-export default function NextLevel({}: UserProps) {
+export default async function NextLevel({}: UserProps) {
+  const { formatMessage } = await getIntl()
   return (
     <section>
-      <Label>{_("Next level")}:</Label>
+      <Label>{formatMessage({ id: "Next level" })}:</Label>
       <Title className={styles.nextLevel} color="pale" level="h3">
-        {_("Close friend")}
-        <BiroScript>{_("Coming up")}!</BiroScript>
+        N/A
+        <BiroScript>{formatMessage({ id: "Coming up" })}!</BiroScript>
       </Title>
     </section>
   )

components/MyPages/Blocks/Overview/Stats/NextLevel/nextLevel.module.css

@@ -7,6 +7,7 @@
 @media screen and (min-width: 768px) {
   .nextLevel {
     gap: var(--Spacing-x1);
-    grid-template-columns: 1fr auto;
+    grid-template-columns: auto auto;
+    justify-content: flex-start;
   }
 }