Use translated strings

prezly · Mar 22, 2024 · ddf23b9 · ddf23b9
1 parent 2c5c51c
commit ddf23b9
Showing 1 changed file with 12 additions and 4 deletions.
diff --git a/modules/InfiniteStories/ui/CategoriesFilters/CategoriesFilters.tsx b/modules/InfiniteStories/ui/CategoriesFilters/CategoriesFilters.tsx
@@ -1,7 +1,8 @@
 import type { Category } from '@prezly/sdk/dist/types';
-import type { Locale } from '@prezly/theme-kit-nextjs';
+import { FormattedMessage, type Locale, translations, useIntl } from '@prezly/theme-kit-nextjs';
 import classNames from 'classnames';
 import Link from 'next/link';
+import type { ReactNode } from 'react';
 
 import { PageTitle } from '@/components/PageTitle';
 
@@ -15,11 +16,18 @@ interface Props {
 }
 
 export function CategoriesFilters({ activeCategory, categories, className, locale }: Props) {
+    const { formatMessage } = useIntl();
+
     return (
         <div className={className}>
-            <PageTitle className={styles.title} title="Latest stories" />
+            <PageTitle
+                className={styles.title}
+                title={formatMessage(translations.homepage.latestStories)}
+            />
             <div className={styles.filters}>
-                <Filter isActive={activeCategory === undefined}>All stories</Filter>
+                <Filter isActive={activeCategory === undefined}>
+                    <FormattedMessage locale={locale} for={translations.homepage.allStories} />
+                </Filter>
                 {categories.map(({ id, display_name, i18n }) => (
                     <Filter categoryId={id} isActive={activeCategory?.id === id} key={id}>
                         {i18n[locale]?.name || display_name}
@@ -32,7 +40,7 @@ export function CategoriesFilters({ activeCategory, categories, className, local
 
 export function Filter(props: {
     categoryId?: Category['id'];
-    children: string;
+    children: ReactNode;
     isActive: boolean;
 }) {
     const { categoryId, children, isActive } = props;