i18n: add translations and formatting to InlineList "more"

app/[locale]/layout.tsx

@@ -122,6 +122,7 @@ export default function LocaleLayout(props: LocaleLayoutProps): ReactNode {
 						"AppHeader",
 						"BernhardCategories",
 						"Error",
+						"InlineList",
 						"InstantSearch",
 						"Languages",
 						"LanguagesPage",

components/inline-list.tsx

@@ -1,3 +1,4 @@
+import { useTranslations } from "next-intl";
 import type { ReactNode } from "react";
 
 interface InlineListProps {
@@ -8,12 +9,17 @@ interface InlineListProps {
 
 export function InlineList(props: InlineListProps): ReactNode {
 	const { children, limit, separator } = props;
+	const t = useTranslations("InlineList");
 
 	const andMore = limit && children.length > limit;
 	if (andMore) {
 		const overhead = 1 + children.length - limit;
 		// eslint-disable-next-line @typescript-eslint/no-floating-promises
-		children.splice(limit - 1, overhead, `+ ${overhead.toString()} more`);
+		children.splice(
+			limit - 1,
+			overhead,
+			<span className="text-nowrap">{t("and_x_more", { x: overhead })}</span>,
+		);
 	}
 
 	return (

messages/de.json

@@ -49,6 +49,9 @@
 		"lead-in": "",
 		"title": "Thomas Bernhard in Translation"
 	},
+	"InlineList": {
+		"and_x_more": "+ noch {x, number}"
+	},
 	"InstantSearch": {
 		"all": "alle",
 		"filter": "Suche",

messages/en.json

@@ -49,6 +49,9 @@
 		"lead-in": "",
 		"title": "Thomas Bernhard in Translation"
 	},
+	"InlineList": {
+		"and_x_more": "+ {x, number} more"
+	},
 	"InstantSearch": {
 		"all": "all",
 		"filter": "search",