アイヌ語追加 (#428) (#433)

Reviewed-on: #433
Co-authored-by: miteruzo <miteruzo@naver.com>

frontend/src/components/ui/dialog.tsx

@@ -3,7 +3,10 @@
 import * as DialogPrimitive from '@radix-ui/react-dialog'
 import { X } from 'lucide-react'
 import * as React from 'react'
+import { useTranslation } from 'react-i18next'
 
+import LocalisedText from '@/components/LocalisedText'
+import { translateUIMessage } from '@/lib/i18n'
 import { cn } from '@/lib/utils'
 
 const Dialog = DialogPrimitive.Root
@@ -32,37 +35,45 @@ DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
 const DialogContent = React.forwardRef<
     React.ElementRef<typeof DialogPrimitive.Content>,
     React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+    & { closeLabel?: React.ReactNode }
 >(
-    ({ className, children, ...props }, ref) => (
-	<DialogPortal>
-	  <DialogOverlay />
-	  <DialogPrimitive.Content
-	      ref={ref}
-	      className={cn (
-		  'fixed left-[50%] top-[50%] z-50 grid w-[calc(100%-2rem)] max-w-lg',
-		  'translate-x-[-50%] translate-y-[-50%]',
-		  'gap-5 rounded-2xl border border-border',
-		  'bg-background p-6 text-foreground shadow-2xl',
-		  'duration-200',
-		  'data-[state=open]:animate-in data-[state=closed]:animate-out',
-		  'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
-		  'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
-		  className)}
-	      {...props}>
-	    {children}
-
-	    <DialogPrimitive.Close
+    ({ className, children, closeLabel, ...props }, ref) => {
+      const { i18n } = useTranslation ('shared')
+      const close = translateUIMessage ('dialogue.close', 'shared', i18n.language)
+      return (
+	  <DialogPortal>
+	    <DialogOverlay/>
+	    <DialogPrimitive.Content
+		ref={ref}
 		className={cn (
-		    'absolute left-4 top-4 rounded-full p-1',
-		    'text-slate-500 transition-colors',
-		    'hover:bg-slate-200 hover:text-slate-900',
-		    'dark:text-slate-400 dark:hover:bg-slate-700 dark:hover:text-slate-50',
-		    'focus:outline-none focus:ring-2 focus:ring-slate-400')}>
-	      <X className="h-4 w-4"/>
-	      <span className="sr-only">閉ぢる</span>
-	    </DialogPrimitive.Close>
-	  </DialogPrimitive.Content>
-	</DialogPortal>))
+		    'fixed left-[50%] top-[50%] z-50 grid w-[calc(100%-2rem)] max-w-lg',
+		    'translate-x-[-50%] translate-y-[-50%]',
+		    'gap-5 rounded-2xl border border-border',
+		    'bg-background p-6 text-foreground shadow-2xl',
+		    'duration-200',
+		    'data-[state=open]:animate-in data-[state=closed]:animate-out',
+		    'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+		    'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+		    className)}
+		{...props}>
+	      {children}
+
+	      <DialogPrimitive.Close
+		  className={cn (
+		      'absolute left-4 top-4 rounded-full p-1',
+		      'text-slate-500 transition-colors',
+		      'hover:bg-slate-200 hover:text-slate-900',
+		      'dark:text-slate-400 dark:hover:bg-slate-700 dark:hover:text-slate-50',
+		      'focus:outline-none focus:ring-2 focus:ring-slate-400')}>
+		<X className="h-4 w-4"/>
+		<span className="sr-only">
+		  {closeLabel ?? (
+		      <LocalisedText language={close.language}>{close.text}</LocalisedText>)}
+		</span>
+	      </DialogPrimitive.Close>
+	    </DialogPrimitive.Content>
+	  </DialogPortal>)
+    })
 DialogContent.displayName = DialogPrimitive.Content.displayName
 
 const DialogHeader = (