#428

frontend/src/components/DevModeWatermark.tsx

@@ -1,4 +1,7 @@
+import { useTranslation } from 'react-i18next'
+
 import nikumaru from '@/assets/fonts/nikumaru.otf'
+import { translateUIMessage } from '@/lib/i18n'
 
 import type { FC } from 'react'
 
@@ -8,8 +11,8 @@ const COLUMN_COUNT = 12
 
 
 const DevModeWatermark: FC = () => {
-  const { t } = useTranslation ('shared')
-  const text = t ('labels.development', { returnDetails: true })
+  const { i18n } = useTranslation ('shared')
+  const text = translateUIMessage ('labels.development', 'shared', i18n.language)
   return (
       <div
 	  aria-hidden="true"
@@ -31,14 +34,14 @@ const DevModeWatermark: FC = () => {
 		{Array.from ({ length: COLUMN_COUNT }, (_, columnIndex) => (
 		    <span
 			key={columnIndex}
-			lang={text.usedLng}
+			lang={text.language}
 			className={
 			    'whitespace-nowrap text-3xl font-bold '
 			    + 'tracking-[0.3em] text-neutral-950/5 '
 			    + 'dark:text-white/10'
 			}
 			style={{ fontFamily: 'Nikumaru' }}>
-		      {text.res}
+		      {text.text}
 		    </span>))}
 	      </div>))}
 	</div>
@@ -47,5 +50,3 @@ const DevModeWatermark: FC = () => {
 
 
 export default DevModeWatermark
-import { useTranslation } from 'react-i18next'
-