feat(curing): add translation

sexyoung · Aug 24, 2023 · 4502ed6 · 4502ed6
1 parent 618920c
commit 4502ed6
Show file tree

Hide file tree

Showing 4 changed files with 260 additions and 8 deletions.
diff --git a/app/components/CuringSubPage.tsx b/app/components/CuringSubPage.tsx
@@ -7,6 +7,7 @@ import cp6 from "~/images/cp6.png";
 import cp7 from "~/images/cp7.png";
 import cp8 from "~/images/cp8.png";
 import cp9 from "~/images/cp9.png";
+import { useTranslation } from "react-i18next";
 
 const image = {
   cp1,
@@ -44,6 +45,7 @@ type CuringSubPageProps = {
 
 const CuringSubPage = (props: CuringSubPageProps) => {
   const { data } = props;
+  let { t } = useTranslation("curing");
 
   return (
     <div className="cp-container">
@@ -76,7 +78,7 @@ const CuringSubPage = (props: CuringSubPageProps) => {
           </div>
         </div>
         <div className="cp-short">
-          <div className="cp-short-text">微專業短評</div>
+          <div className="cp-short-text">{t("cpShortText")}</div>
           <div className="cp-short-divider" />
         </div>
         <div
@@ -159,7 +161,7 @@ const CuringSubPage = (props: CuringSubPageProps) => {
         <table>
           <tbody>
             <tr>
-              <th>副作用</th>
+              <th>{t("sideEffect")}</th>
             </tr>
             <tr>
               <td>

diff --git a/app/routes/($lang).curing.tsx b/app/routes/($lang).curing.tsx
@@ -4,6 +4,7 @@ import stylesheet from "~/styles/curing.css";
 import curingData from "~/data/curing.json";
 import type { CuringDataType } from "~/components/CuringSubPage";
 import CuringSubPage from "~/components/CuringSubPage";
+import { useTranslation } from "react-i18next";
 
 export const links: LinksFunction = () => [
   { rel: "stylesheet", href: stylesheet },
@@ -12,18 +13,25 @@ export const links: LinksFunction = () => [
 export const meta: V2_MetaFunction = () => [{ title: "CP 值專區" }];
 
 export default function () {
+  let { t, ready } = useTranslation("curing");
   return (
     <div>
       <div className="hero">
         <div>CP 值專區</div>
       </div>
       <div className="mx-auto mt-16">
-        {(curingData as CuringDataType[]).map((data, index: number) => (
-          <div key={index}>
-            <CuringSubPage data={data} />
-            {index !== curingData.length - 1 && <ArrowAltCircleDown />}
-          </div>
-        ))}
+        {(curingData as CuringDataType[]).map((data, index: number) => {
+          const dataI18n: CuringDataType = t(`data.${index}`, {
+            returnObjects: true,
+          });
+          if (!ready) return null;
+          return (
+            <div key={index}>
+              <CuringSubPage data={dataI18n} />
+              {index !== curingData.length - 1 && <ArrowAltCircleDown />}
+            </div>
+          );
+        })}
         <i className="fa fa-arrow-circle-o-down" aria-hidden="true"></i>
       </div>
     </div>

diff --git a/public/locales/en/curing.json b/public/locales/en/curing.json
@@ -0,0 +1,121 @@
+{
+  "cpShortText": "Brief Summaries",
+  "sideEffect": "Side Effects",
+  "data": [
+    {
+      "title": "症狀控制藥",
+      "titleS": "",
+      "subtitleS": [
+        "Naproxen（能百鎮）",
+        "Tranexamic acid（斷血炎）",
+        "Ergonovine（縮水蘋果酸麥角新鹼片）"
+      ],
+      "subtitleM": [""],
+      "shortComment": "The above drugs are the most common medicinal products available in regular pharmacies or through reselling channels, which aim to rapid pain relief or hemostasis. In fact, taking “hemostasis” as an example, the above medicines can only reduce bleeding by 30–50%, i.e. sometimes females who have undergone these interventions still have chief complaints about continuous bleeding. If the drugs fail, a specialist visit is required to ascertain the background causes.",
+      "sideEffect": [
+        ">10%: Stomach upset, bleeding risks",
+        "1–10%: Fatigue",
+        "<1%: Venous thrombosis, chest tightness, seizure"
+      ],
+      "image": "cp1"
+    },
+    {
+      "title": "異位寧",
+      "titleS": "",
+      "subtitleS": [""],
+      "subtitleM": ["Dienogest"],
+      "shortComment": "最新一代黃體素大幅降低過去其他類似藥物嚴重副作用，大部分的女性在使用藥物當天就能明顯感受到經痛改善，而研究統計能降低90%卵巢巧克力囊腫復發！使用新致個月可能會有持镇點状出血，並大約在服藥，至12個月後改善，有少部分女性可能在使用15個月後再次點狀出血。若有相關情況，可以嘗試於月經剛結束時開始服藥、先以3-6個月柳菩林調整賀爾蒙狀熊或加上症狀缓解藥物改善。另外也可以諮詢醫師進行驗孕、超音波檢查、子宮內膜檢查。少數女性會有其他令人煩惱的副作用，但大致上都會因為相較之下的神奇經痛缓解效果而選擇繼續服藥。若有<u>使用賀爾蒙相對禁忌的內科疾病，使用前須請醫師評估</u>。",
+      "sideEffect": [
+        ">5%：頭痛、陰道點狀出血、乳房脹痛",
+        "1-5%：憂鬱、易怒、長痘痘、掉髮、體重增加",
+        "<1%：腹瀉、水腫"
+      ],
+      "image": "cp1"
+    },
+    {
+      "title": "黛麗安",
+      "titleS": "",
+      "subtitleS": ["Cyproterone and ethinyl estradiol"],
+      "subtitleM": [""],
+      "shortComment": "黛麗安是黃體素及雌激素的組合，透過降低體內賀爾蒙劇變而達到控制子宮內膜異位症的效果，但因為仍有週期性生理期變化，所以在緩解經痛及預防復發的治療效果上可能稍弱於異位窒。黛麗安造成的副作用相對較令人滿意，因此可考慮作為無法忍受異位寧副作用的替代治療。黛麗安可能造成靜脈血栓（亞洲人罕見），若有<u>吸菸、使用賀爾蒙相對禁忌的内科疾病，使用前須請醫師評估。</u>",
+      "sideEffect": [
+        ">5%：乳房脹痛",
+        "1-5%：頭痛、憂鬱、水腫",
+        "<1%：肝功能異常、靜脈血栓"
+      ],
+      "image": "cp1"
+    },
+    {
+      "title": "",
+      "titleS": "（類）雄性素",
+      "subtitleS": ["Danazol（達爾諾）", "Gestrinone（佑汝）"],
+      "subtitleM": [""],
+      "shortComment": "達爾諾在數十年前是控制子宮內膜異位症的首選藥物之一，然而因為強烈雄性化（不可逆）副作用帶來的風險可能比效益還嚴重，而限制了它在臨床上的使用。佑汝是近年來治療子宮內膜異位症較新的藥物選擇之一，透過減少雄性化的副作用、較為簡易的服藥方式，獲得了部分女性的青睞。若有<u>使用賀爾蒙相對禁忌的內科疾病，使用前須請醫師評估。</u>",
+      "sideEffect": [
+        ">5%：體重增加、水腫、胸部變小、長痘痘、多毛、聲音低沈",
+        "≤5%：靜脈血栓、心肌梗塞、肝功能異常"
+      ],
+      "image": "cp1"
+    },
+    {
+      "title": "",
+      "titleS": "性腺激素釋放素促進劑",
+      "subtitleS": ["Leuprolide Acetate（柳菩林）"],
+      "subtitleM": [""],
+      "shortComment": "柳菩林針劑在異位寧引進前是洽療子宮內膜異位症的標準配備，經過3-6個月的治療後，有機會後續達到長達1年的暫時藥物停經狀態，若剛好接近更年期，更可能從此告別子宮內膜異位症相關煩惱。然而並非所有人都可以負擔其高貴藥價。因超長期治療可能引發骨質疏鬆的風險，目前建議一個療程的治療期間最多6個月。",
+      "sideEffect": [
+        ">5%：失眠、盗汗、熱潮紅、水腫",
+        "1-5%：骨質疏鬆、骨折、情緒障礙",
+        "≤1%：肺部纖維化"
+      ],
+      "image": "cp5"
+    },
+    {
+      "title": "",
+      "titleS": "子宮內投藥避孕器密蕊娜",
+      "subtitleS": [""],
+      "subtitleM": ["Intrauterine Device"],
+      "shortComment": "與一般避孕器不同的是，密蕊娜透過緩慢釋放黃體素減緩經痛並讓子宮內膜萎縮達到減少經血、藥物停經的效果。因為不用每天服用或打針，此種治療方式相對具有便利性，但是在達到止血效果前會有約6個月以上的點狀出血，可以透過子宮鏡子宮內膜電燒做前期控制。此外，若子宮結構特殊，避孕器有可能在前幾次月經期間順著經血排出。若有需求，可以在門診或輕度麻醉子宮鏡檢查時同時置入避孕器。",
+      "sideEffect": [
+        ">10%：下腹痛、陰道炎、前期異常出血、頭痛",
+        "1-10%：乳房脹痛、憂鬱",
+        "<1%：子宮外孕、子宮破裂"
+      ],
+      "image": "cp6"
+    },
+    {
+      "title": "子宮鏡",
+      "titleS": "",
+      "subtitleS": ["子宮內膜檢查、切片、電燒等"],
+      "subtitleM": [""],
+      "shortComment": "子宮鏡可以在門診或輕度麻醉下施行，會有像做子宮頸抹片般的痠脹感。子宮鏡通常使用於子宮異常出血、停經後出血的評估是否有瘜肉、黏膜下肌瘤、內膜增生或癌症。對於已經完成生育的女性，可以透過子宮鏡廣泛子宮內膜電燒達到數個月以上的止血效果，並同時置入子宮內投藥避孕器延長止血效果。",
+      "sideEffect": [
+        "1-5%：子宮腔沾黏",
+        "<1%：子宮破裂、出血、水中毒、骨盆器宫破裂"
+      ],
+      "image": "cp7"
+    },
+    {
+      "title": "保守性手術",
+      "titleS": "",
+      "subtitleS": ["卵巢囊腫切除、肌腺瘤切除、骨盆神經阻齗等"],
+      "subtitleM": [""],
+      "shortComment": "任何手術都相對具侵入性，通常適用於藥物治療失敗、症狀明顯、或懷疑惡性腫瘤等情況。保守性手術大部分可以透過微創（腹腔鏡、自然孔道手術、達文西手術） 完成，對於部分特別嚴重、沾黏或懷疑惡性腫瘤的狀況，則可能需要進行開腹手術。不同醫師可能有不同治療成效，若有生育需求建議先諮詢不孕症專科醫師。",
+      "sideEffect": ["1-5%：傷口疝氣、感染、泌尿道損傷", "<1%：腸道損傷"],
+      "image": "cp8"
+    },
+    {
+      "title": "根除性手術",
+      "titleS": "",
+      "subtitleS": ["子宮切除、卵巢及輸卵管切除等"],
+      "subtitleM": [""],
+      "shortComment": "根除性手術同樣適用於藥物治療失敗、症狀明顯、或懷疑惡性腫瘤等情況，並且已經完成生育、40歲以上的婦女。大部分的根除性手術仍可以透過微創手術完成，然而對於特別嚴重、沾黏或懷疑惡性腫瘤的狀況，則會在醫師評估下進行開腹手術。",
+      "sideEffect": [
+        ">10%；傷口疝氣、術後沾黏、發燒",
+        "1-10%：泌尿道損傷、神經損傷",
+        "<1%：腸道損傷"
+      ],
+      "image": "cp9"
+    }
+  ]
+}
diff --git a/public/locales/zh-TW/curing.json b/public/locales/zh-TW/curing.json
@@ -0,0 +1,121 @@
+{
+  "cpShortText": "微專業短評",
+  "sideEffect": "副作用",
+  "data": [
+    {
+      "title": "症狀控制藥",
+      "titleS": "",
+      "subtitleS": [
+        "Naproxen（能百鎮）",
+        "Tranexamic acid（斷血炎）",
+        "Ergonovine（縮水蘋果酸麥角新鹼片）"
+      ],
+      "subtitleM": [""],
+      "shortComment": "這些藥物是平常我們最容易在藥局、國外代購入手的居家備品，通常以迅速止痛、止血為目標；然而事實上以止血來說，每種藥物平均只能減少30-50%出血量，因此偶而會有女性抱怨即使吃了止血藥仍然在流血。若無法改善症狀，仍應尋求專業醫師協助找出病因。",
+      "sideEffect": [
+        ">10%: 腸胃不適、出血風險",
+        "1-10%: 疲倦",
+        "<1%: 靜脈血栓、胸悶、癲癇"
+      ],
+      "image": "cp1"
+    },
+    {
+      "title": "異位寧",
+      "titleS": "",
+      "subtitleS": [""],
+      "subtitleM": ["Dienogest"],
+      "shortComment": "最新一代黃體素大幅降低過去其他類似藥物嚴重副作用，大部分的女性在使用藥物當天就能明顯感受到經痛改善，而研究統計能降低90%卵巢巧克力囊腫復發！使用新致個月可能會有持镇點状出血，並大約在服藥，至12個月後改善，有少部分女性可能在使用15個月後再次點狀出血。若有相關情況，可以嘗試於月經剛結束時開始服藥、先以3-6個月柳菩林調整賀爾蒙狀熊或加上症狀缓解藥物改善。另外也可以諮詢醫師進行驗孕、超音波檢查、子宮內膜檢查。少數女性會有其他令人煩惱的副作用，但大致上都會因為相較之下的神奇經痛缓解效果而選擇繼續服藥。若有<u>使用賀爾蒙相對禁忌的內科疾病，使用前須請醫師評估</u>。",
+      "sideEffect": [
+        ">5%：頭痛、陰道點狀出血、乳房脹痛",
+        "1-5%：憂鬱、易怒、長痘痘、掉髮、體重增加",
+        "<1%：腹瀉、水腫"
+      ],
+      "image": "cp1"
+    },
+    {
+      "title": "黛麗安",
+      "titleS": "",
+      "subtitleS": ["Cyproterone and ethinyl estradiol"],
+      "subtitleM": [""],
+      "shortComment": "黛麗安是黃體素及雌激素的組合，透過降低體內賀爾蒙劇變而達到控制子宮內膜異位症的效果，但因為仍有週期性生理期變化，所以在緩解經痛及預防復發的治療效果上可能稍弱於異位窒。黛麗安造成的副作用相對較令人滿意，因此可考慮作為無法忍受異位寧副作用的替代治療。黛麗安可能造成靜脈血栓（亞洲人罕見），若有<u>吸菸、使用賀爾蒙相對禁忌的内科疾病，使用前須請醫師評估。</u>",
+      "sideEffect": [
+        ">5%：乳房脹痛",
+        "1-5%：頭痛、憂鬱、水腫",
+        "<1%：肝功能異常、靜脈血栓"
+      ],
+      "image": "cp1"
+    },
+    {
+      "title": "",
+      "titleS": "（類）雄性素",
+      "subtitleS": ["Danazol（達爾諾）", "Gestrinone（佑汝）"],
+      "subtitleM": [""],
+      "shortComment": "達爾諾在數十年前是控制子宮內膜異位症的首選藥物之一，然而因為強烈雄性化（不可逆）副作用帶來的風險可能比效益還嚴重，而限制了它在臨床上的使用。佑汝是近年來治療子宮內膜異位症較新的藥物選擇之一，透過減少雄性化的副作用、較為簡易的服藥方式，獲得了部分女性的青睞。若有<u>使用賀爾蒙相對禁忌的內科疾病，使用前須請醫師評估。</u>",
+      "sideEffect": [
+        ">5%：體重增加、水腫、胸部變小、長痘痘、多毛、聲音低沈",
+        "≤5%：靜脈血栓、心肌梗塞、肝功能異常"
+      ],
+      "image": "cp1"
+    },
+    {
+      "title": "",
+      "titleS": "性腺激素釋放素促進劑",
+      "subtitleS": ["Leuprolide Acetate（柳菩林）"],
+      "subtitleM": [""],
+      "shortComment": "柳菩林針劑在異位寧引進前是洽療子宮內膜異位症的標準配備，經過3-6個月的治療後，有機會後續達到長達1年的暫時藥物停經狀態，若剛好接近更年期，更可能從此告別子宮內膜異位症相關煩惱。然而並非所有人都可以負擔其高貴藥價。因超長期治療可能引發骨質疏鬆的風險，目前建議一個療程的治療期間最多6個月。",
+      "sideEffect": [
+        ">5%：失眠、盗汗、熱潮紅、水腫",
+        "1-5%：骨質疏鬆、骨折、情緒障礙",
+        "≤1%：肺部纖維化"
+      ],
+      "image": "cp5"
+    },
+    {
+      "title": "",
+      "titleS": "子宮內投藥避孕器密蕊娜",
+      "subtitleS": [""],
+      "subtitleM": ["Intrauterine Device"],
+      "shortComment": "與一般避孕器不同的是，密蕊娜透過緩慢釋放黃體素減緩經痛並讓子宮內膜萎縮達到減少經血、藥物停經的效果。因為不用每天服用或打針，此種治療方式相對具有便利性，但是在達到止血效果前會有約6個月以上的點狀出血，可以透過子宮鏡子宮內膜電燒做前期控制。此外，若子宮結構特殊，避孕器有可能在前幾次月經期間順著經血排出。若有需求，可以在門診或輕度麻醉子宮鏡檢查時同時置入避孕器。",
+      "sideEffect": [
+        ">10%：下腹痛、陰道炎、前期異常出血、頭痛",
+        "1-10%：乳房脹痛、憂鬱",
+        "<1%：子宮外孕、子宮破裂"
+      ],
+      "image": "cp6"
+    },
+    {
+      "title": "子宮鏡",
+      "titleS": "",
+      "subtitleS": ["子宮內膜檢查、切片、電燒等"],
+      "subtitleM": [""],
+      "shortComment": "子宮鏡可以在門診或輕度麻醉下施行，會有像做子宮頸抹片般的痠脹感。子宮鏡通常使用於子宮異常出血、停經後出血的評估是否有瘜肉、黏膜下肌瘤、內膜增生或癌症。對於已經完成生育的女性，可以透過子宮鏡廣泛子宮內膜電燒達到數個月以上的止血效果，並同時置入子宮內投藥避孕器延長止血效果。",
+      "sideEffect": [
+        "1-5%：子宮腔沾黏",
+        "<1%：子宮破裂、出血、水中毒、骨盆器宫破裂"
+      ],
+      "image": "cp7"
+    },
+    {
+      "title": "保守性手術",
+      "titleS": "",
+      "subtitleS": ["卵巢囊腫切除、肌腺瘤切除、骨盆神經阻齗等"],
+      "subtitleM": [""],
+      "shortComment": "任何手術都相對具侵入性，通常適用於藥物治療失敗、症狀明顯、或懷疑惡性腫瘤等情況。保守性手術大部分可以透過微創（腹腔鏡、自然孔道手術、達文西手術） 完成，對於部分特別嚴重、沾黏或懷疑惡性腫瘤的狀況，則可能需要進行開腹手術。不同醫師可能有不同治療成效，若有生育需求建議先諮詢不孕症專科醫師。",
+      "sideEffect": ["1-5%：傷口疝氣、感染、泌尿道損傷", "<1%：腸道損傷"],
+      "image": "cp8"
+    },
+    {
+      "title": "根除性手術",
+      "titleS": "",
+      "subtitleS": ["子宮切除、卵巢及輸卵管切除等"],
+      "subtitleM": [""],
+      "shortComment": "根除性手術同樣適用於藥物治療失敗、症狀明顯、或懷疑惡性腫瘤等情況，並且已經完成生育、40歲以上的婦女。大部分的根除性手術仍可以透過微創手術完成，然而對於特別嚴重、沾黏或懷疑惡性腫瘤的狀況，則會在醫師評估下進行開腹手術。",
+      "sideEffect": [
+        ">10%；傷口疝氣、術後沾黏、發燒",
+        "1-10%：泌尿道損傷、神經損傷",
+        "<1%：腸道損傷"
+      ],
+      "image": "cp9"
+    }
+  ]
+}