#428

frontend/src/components/SortHeader.tsx

@@ -2,10 +2,12 @@ import { useLocation } from 'react-router-dom'
 
 import PrefetchLink from '@/components/PrefetchLink'
 
+import type { ReactNode } from 'react'
+
 
 export default <T extends string,>({ by, label, currentOrder, defaultDirection }: {
     by:               T
-    label:            string
+    label:            ReactNode
     currentOrder:     `${ T }:${ 'asc' | 'desc' }`
     defaultDirection: Record<T, 'asc' | 'desc'> }) => {
   const [fld, dir] = currentOrder.split (':')

frontend/src/components/TagLink.tsx

@@ -1,5 +1,6 @@
 import PrefetchLink from '@/components/PrefetchLink'
 import ResponsiveMarqueeText from '@/components/ResponsiveMarqueeText'
+import { useUITranslation } from '@/lib/useUITranslation'
 import { cn } from '@/lib/utils'
 
 import type { ComponentProps, CSSProperties, FC, HTMLAttributes } from 'react'
@@ -67,6 +68,10 @@ const TagLink: FC<Props> = ({ tag,
 			      style,
 			      title,
 			      ...props }) => {
+  const { message } = useUITranslation ()
+  const missingMaterial = message ('tagLink.missingMaterial', { name: tag.name })
+  const missingDeerjikist = message ('tagLink.missingDeerjikist', { name: tag.name })
+  const missingWiki = message ('tagLink.missingWiki', { name: tag.name })
   const colourStyle = {
       '--tag-link-colour': `var(--tag-colour-${ tag.category })`,
       '--tag-link-hover-colour': `var(--tag-colour-${ tag.category }-hover)`,
@@ -121,7 +126,8 @@ const TagLink: FC<Props> = ({ tag,
 			  to={`/materials/new?tag=${ encodeURIComponent (tag.name) }`}
 			  className="animate-[wiki-blink_.25s_steps(2,end)_infinite]
 				     dark:animate-[wiki-blink-dark_.25s_steps(2,end)_infinite]"
-			  title={`${ tag.name } 素材情報が存在しません．`}>
+			  lang={missingMaterial.language}
+			  title={missingMaterial.text}>
 			!
 		      </PrefetchLink>)
 		  : (
@@ -131,7 +137,8 @@ const TagLink: FC<Props> = ({ tag,
 			      to={`/tags/${ tag.id }/deerjikists`}
 			      className="animate-[wiki-blink_.25s_steps(2,end)_infinite]
 					 dark:animate-[wiki-blink-dark_.25s_steps(2,end)_infinite]"
-			      title={`${ tag.name } に関する情報が存在しません．`}>
+			      lang={missingDeerjikist.language}
+			      title={missingDeerjikist.text}>
 			    !
 			  </PrefetchLink>)
 		      : (
@@ -139,7 +146,8 @@ const TagLink: FC<Props> = ({ tag,
 			      to={`/wiki/${ encodeURIComponent (tag.name) }`}
 			      className="animate-[wiki-blink_.25s_steps(2,end)_infinite]
 					 dark:animate-[wiki-blink-dark_.25s_steps(2,end)_infinite]"
-			      title={`${ tag.name } Wiki が存在しません．`}>
+			      lang={missingWiki.language}
+			      title={missingWiki.text}>
 			    !
 			  </PrefetchLink>)))}
 	    </span>)}

frontend/src/components/TranslatedText.tsx

@@ -1,7 +1,5 @@
-import { useTranslation } from 'react-i18next'
-
 import LocalisedText from '@/components/LocalisedText'
-import { useLocale } from '@/lib/useLocale'
+import { useUITranslation } from '@/lib/useUITranslation'
 
 type Props = {
     messageKey: string
@@ -13,12 +11,11 @@ type Props = {
 const TranslatedText = (
     { messageKey, namespace = 'navigation', values, className }: Props,
 ) => {
-  const locale = useLocale ()
-  const { t } = useTranslation (namespace, { lng: locale })
-  const result = t (messageKey, { ...values, returnDetails: true })
+  const { message } = useUITranslation (namespace)
+  const result = message (messageKey, values)
   return (
-      <LocalisedText language={result.usedLng} className={className}>
-	{result.res}
+      <LocalisedText language={result.language} className={className}>
+	{result.text}
       </LocalisedText>)
 }
 

frontend/src/components/common/Pagination.tsx

@@ -1,6 +1,7 @@
 import { useLocation } from 'react-router-dom'
 
 import PrefetchLink from '@/components/PrefetchLink'
+import { useUITranslation } from '@/lib/useUITranslation'
 
 import type { FC } from 'react'
 
@@ -49,6 +50,7 @@ const getPages = (
 
 const Pagination: FC<Props> = ({ page, totalPages, siblingCount = 3 }) => {
   const location = useLocation ()
+  const { message } = useUITranslation ()
 
   const buildTo = (p: number) => {
     const qs = new URLSearchParams (location.search)
@@ -59,7 +61,9 @@ const Pagination: FC<Props> = ({ page, totalPages, siblingCount = 3 }) => {
   const pages = getPages (page, totalPages, siblingCount)
 
   return (
-      <nav className="mt-4 flex justify-center" aria-label="Pagination">
+      <nav className="mt-4 flex justify-center"
+	  lang={message ('pagination.label').language}
+	  aria-label={message ('pagination.label').text}>
 	<div className="flex items-center gap-2">
 	  {(page > 1)
 	   ? (
@@ -67,13 +71,15 @@ const Pagination: FC<Props> = ({ page, totalPages, siblingCount = 3 }) => {
 		<PrefetchLink
 		    className="md:hidden p-2"
 		    to={buildTo (1)}
-		    aria-label="最初のページ">
+		    lang={message ('pagination.first').language}
+		    aria-label={message ('pagination.first').text}>
 		  |&lt;
 		</PrefetchLink>
 		<PrefetchLink
 		    className="p-2"
 		    to={buildTo (page - 1)}
-		    aria-label="前のページ">
+		    lang={message ('pagination.previous').language}
+		    aria-label={message ('pagination.previous').text}>
 		  &lt;
 		</PrefetchLink>
 	      </>)
@@ -106,13 +112,15 @@ const Pagination: FC<Props> = ({ page, totalPages, siblingCount = 3 }) => {
 		<PrefetchLink
 		    className="p-2"
 		    to={buildTo (page + 1)}
-		    aria-label="次のページ">
+		    lang={message ('pagination.next').language}
+		    aria-label={message ('pagination.next').text}>
 		  &gt;
 		</PrefetchLink>
 		<PrefetchLink
 		    className="md:hidden p-2"
 		    to={buildTo (totalPages)}
-		    aria-label="最後のページ">
+		    lang={message ('pagination.last').language}
+		    aria-label={message ('pagination.last').text}>
 		  &gt;|
 		</PrefetchLink>
 	      </>)