From 352222f49da47884d221862f6b9c464b7bbd3477 Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Tue, 6 Aug 2024 08:27:24 +0900
Subject: [PATCH] [Update] Config Window: MessageFormat. Add translated message
 to the example display, language flexibly.

---
 .../components/message_format/MessageFormat.jsx   | 15 +++++++++++++--
 .../message_format/MessageFormat.module.scss      |  2 +-
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/src-ui/windows/config_window/setting_section/setting_box/components/message_format/MessageFormat.jsx b/src-ui/windows/config_window/setting_section/setting_box/components/message_format/MessageFormat.jsx
index defc9e22..28b3f0eb 100644
--- a/src-ui/windows/config_window/setting_section/setting_box/components/message_format/MessageFormat.jsx
+++ b/src-ui/windows/config_window/setting_section/setting_box/components/message_format/MessageFormat.jsx
@@ -8,7 +8,7 @@ export const MessageFormat = (props) => {
             <ExampleComponent {...props}/>
             <InputComponent {...props}/>
             {
-                props.with_t
+                props.with_t === true
                 ? <SwapButton/>
                 : null
             }
@@ -16,11 +16,22 @@ export const MessageFormat = (props) => {
     );
 };
 
+import { useUiLanguageStatus } from "@store";
+
 const ExampleComponent = (props) => {
     const { t } = useTranslation();
+    const { currentUiLanguageStatus } = useUiLanguageStatus();
 
     const createExampleMessage = () => {
-        return t("config_window.send_message_format.example_text");
+        const original_lang_message = t("config_window.send_message_format.example_text");
+
+        if (props.with_t === true) {
+            const translation_locale = currentUiLanguageStatus === "en" ? "ja" : "en";
+            const translated_lang_message = t("config_window.send_message_format.example_text", {lng: translation_locale});
+            return original_lang_message + translated_lang_message;
+        } else {
+            return original_lang_message;
+        }
     };
 
     return (
diff --git a/src-ui/windows/config_window/setting_section/setting_box/components/message_format/MessageFormat.module.scss b/src-ui/windows/config_window/setting_section/setting_box/components/message_format/MessageFormat.module.scss
index 823b5a72..dfe4fc07 100644
--- a/src-ui/windows/config_window/setting_section/setting_box/components/message_format/MessageFormat.module.scss
+++ b/src-ui/windows/config_window/setting_section/setting_box/components/message_format/MessageFormat.module.scss
@@ -28,7 +28,7 @@
 
 .preset_text {
     font-size: 1.6rem;
-    width: 100%;
+    width: 40rem;
     text-align: center;
 }