i18n

src/features/core/components/header.tsx

@@ -1,8 +1,15 @@
 import { Title, AppShell, Flex } from "@mantine/core";
+import { useLingui } from "@lingui/react";
 import { HeaderConfig } from "../types/header-config";
 import BackButton from "./back-button";
 
-const Header = ({ collapsed, title, withBackButton }: HeaderConfig) => {
+const Header = ({ collapsed, title, titleValues, withBackButton }: HeaderConfig) => {
+  const { i18n } = useLingui();
+  const resolvedTitle =
+    typeof title === "string" || title === undefined
+      ? title
+      : i18n._({ ...title, values: titleValues });
+
   return (
     <AppShell.Header
       id='app-header'
@@ -15,7 +22,7 @@ const Header = ({ collapsed, title, withBackButton }: HeaderConfig) => {
       { withBackButton && <BackButton /> }
       <Flex justify='center' px='md' mt={8}>
         <Title order={1} lts='0.08em' style={{ userSelect: 'none' }}>
-          {title?.toLocaleUpperCase()}
+          {resolvedTitle?.toLocaleUpperCase()}
         </Title>
       </Flex>
     </AppShell.Header>