Merge pull request #64 from somangoi/release/v1.2.0

Release/v1.2.0

src/components/menu/LanguageMenu.tsx

@@ -0,0 +1,72 @@
+import React, { useEffect, useState } from 'react';
+import { Menu, MenuItem, IconButton } from '@mui/material';
+import { TranslateRounded } from '@mui/icons-material';
+import { useTranslation } from 'react-i18next';
+import styled from 'styled-components';
+
+const langOptions = [
+  { text: 'English', data: 'en' },
+  { text: '한국어', data: 'ko' },
+  { text: 'नेपाली', data: 'ne' },
+];
+
+const LanguageMenu = () => {
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const [selectedIndex, setSelectedIndex] = useState(1);
+  const [lang, setLang] = useState('');
+  const { i18n } = useTranslation();
+  const open = Boolean(anchorEl);
+
+  const handleClickMenuButton = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleMenuItemClick = (
+    event: React.MouseEvent<HTMLElement>,
+    index: number,
+    lang: string,
+  ) => {
+    setSelectedIndex(index);
+    i18n.changeLanguage(lang).then(() => {
+      setLang(lang);
+    });
+    setAnchorEl(null);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <>
+      <IconButton id="basic-button" onClick={handleClickMenuButton}>
+        <TranslateRounded fontSize="small" />
+      </IconButton>
+      <Menu
+        id="basic-menu"
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+        MenuListProps={{
+          'aria-labelledby': 'basic-button',
+        }}
+      >
+        {langOptions.map((lang, index) => (
+          <MenuItemComponent
+            key={lang.text}
+            selected={index === selectedIndex}
+            onClick={event => handleMenuItemClick(event, index, lang.data)}
+          >
+            {lang.text}
+          </MenuItemComponent>
+        ))}
+      </Menu>
+    </>
+  );
+};
+
+export default LanguageMenu;
+
+const MenuItemComponent = styled(MenuItem)`
+  min-width: 150px;
+`;

src/components/nav/Navigation.tsx

@@ -1,14 +1,13 @@
 import {
-  ContactSupportRounded,
   HomeRounded,
   VolunteerActivismRounded,
   InfoRounded,
 } from '@mui/icons-material';
 import { IconButton } from '@mui/material';
-import React from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
 import ChapterMenu from '../ChapterMenu';
+import LanguageMenu from '../menu/LanguageMenu';
 
 const Navigation = ({ showNav }: any) => {
   const navigate = useNavigate();
@@ -40,6 +39,7 @@ const Navigation = ({ showNav }: any) => {
             <VolunteerActivismRounded fontSize="small" />
           </IconButton>
         </Link>
+        <LanguageMenu />
       </MenuButtonContainer>
     </NavContainer>
   );

src/config/i18n/en/Period.json

@@ -26,5 +26,5 @@
   "TeamTitle": "Who made Okay to Bleed?",
   "TeamIntro": "10 successful, passionate women from South Korea made this project.\nTo read more about our story(written in Korean!), click the link below.",
   "NewsletterLink": "https://stib.ee/ouP6",
-  "CommingSoon": "COMMING SOON"
+  "ComingSoon": "COMING SOON"
 }

src/config/i18n/en/SanitaryProducts.json

@@ -2,6 +2,7 @@
   "sanitaryPadTitle": "Disposable sanitary pads",
   "sanitaryPadDesc": "Stick the pad to your underwear using the sticky strip on the back of the pad. Choose the size of the pads depending on the menstrual flow (the amount of blood).",
   "sanitaryPadHowToUse": "-Change the disposable sanitary pads every 3-4 hours or when it is all soaked with blood for hygiene.\nRoll up the used pad to cover the blood and throw them in the trash. Since it is a disposable one, make sure not to use it again.",
+  "reusablePadTitle": "Reusable Pad",
   "reusablePadDesc": "- Reusable sanitary pads looks similar to the disposable sanitary pad.",
   "reusablePadHowToUse": "The way of usage is almost same with the disposable one, but it is made of reusable materials so you can reuse after washing it.",
   "tamponTitle": "Tampons",

src/config/i18n/i18n.ts

@@ -3,12 +3,14 @@ import { initReactI18next } from 'react-i18next';
 
 import translationEn from './en/index';
 import translationKo from './ko/index';
+import translationNe from './ne/index';
 
 export const defaultNS = 'common';
 
 const resources = {
   en: translationEn,
   ko: translationKo,
+  ne: translationNe,
 } as const;
 
 const userLanguage = window.navigator.language;

src/config/i18n/ko/Period.json

@@ -26,5 +26,5 @@
   "TeamTitle": "Okay to Bleed를 만든 사람들",
   "TeamIntro": "국제개발협력, 디자인, 개발 등 다양한 커리어를 성공적으로 밟고있는\n한국의 여성 10명이 모여 이 프로젝트를 만들었습니다.\n아래 링크로 가면 저희의 이야기를 더 알아볼 수 있어요.",
   "NewsletterLink": "https://stib.ee/ouP6",
-  "CommingSoon": "서비스 준비중입니다."
+  "ComingSoon": "서비스 준비중입니다."
 }

src/config/i18n/ne/Ch1Subtitles.json

@@ -0,0 +1,27 @@
+{
+  "0": "",
+  "2000": "सामान्यतया, जब केटीहरू 11 देखि 14 वर्षका हुन्छन्,",
+  "2800": "यौवन* सुरु भएपछि तिनीहरूको शरीर परिवर्तन हुन थाल्छ।",
+  "3600": "*यौवन: त्यो समय जब तपाईं बच्चाबाट वयस्कमा सर्दा",
+  "4400": "शरीरको विकास र परिवर्तन हुन थाल्छ।",
+  "5200": "",
+  "5800": "ती परिवर्तनहरू मध्ये एक अवधि छ।",
+  "6400": "अवधिमा, रगत तपाईंको शरीरबाट केही दिन (लगभग 3-7 दिन) बाहिर आउँछ। त्यसोभए, तपाईं यसलाई डराउन सक्नुहुन्छ।",
+  "7000": "तर नडराउनुहोस्! यो एक प्राकृतिक संकेत हो कि तपाईंको शरीर सामान्य रूपमा काम गरिरहेको छ साथै तपाईं स्वस्थ हुनुहुन्छ।",
+  "7600": "",
+  "8000": "शरीरमा विभिन्न अंगहरू हुन्छन्।",
+  "8800": "यी अंगहरूको प्रत्येक फरक भूमिका हुन्छ।",
+  "9600": "महिलाको शरिरमा रहेको एउटा अङ्गलाई ‘पाठ’ भनिन्छ, जहाँ बच्चा हुर्कन्छ।",
+  "10400": "प्रत्येक अंडाशय पाठेघरको दुबै छेउमा राखिएको हुन्छ।",
+  "11200": "जब यौवन सुरु हुन्छ, डिम्बाशयको दुबै छेउले पूर्ण रूपमा बढेको अण्डा छोड्छ र महिनामा एक पटक छोड्छ।",
+  "12000": "दुवै अण्डाशयले पालैपालो अण्डा छोड्छ।",
+  "12800": "",
+  "15800": "जब अण्डा पूर्ण रूपमा बढ्छ, यो फलोपियन ट्यूब* मार्फत गर्भाशयमा सर्छ।",
+  "16400": "अण्डा घुम्ने प्रक्रियालाई हामी ‘ओभ्युलेसन’ भन्छौं।",
+  "17000": "पछि, अण्डा गर्भाशय मा शुक्राणु भेट्न सक्छ। यो 'फर्टिलाइज्ड' हो, जुन गर्भावस्थाको पहिलो चरण हो",
+  "17600": "*निषेचन: डिम्बाशय र शुक्रकीटबाट डिम्ब मिल्ने र नयाँ बच्चाको रूपमा विकास गर्न सुरु गर्ने प्रक्रिया।",
+  "18200": "यदि यो निषेचित छैन भने, गर्भाशयको अस्तर (भित्री पाठेघरको पर्खाल) स्वाभाविक रूपमा झर्छ, किनभने पुरानो अस्तर अस्वस्थ हुन्छ।",
+  "19200": "पाठेघरको खसेको अस्तरबाट रगत बग्छ र रगत ‘योनि’ नलीबाट बाहिर निस्कन्छ।",
+  "20200": "यो सम्पूर्ण प्रक्रियालाई हामी 'पिरीयड (वा महिनावारी)' भन्छौं।",
+  "21000": ""
+}

src/config/i18n/ne/Ch2Subtitles.json

@@ -0,0 +1,31 @@
+{
+  "0": "",
+  "200": "महिनावारी अघि र यस अवधिमा, धेरै केटीहरू र महिलाहरूले आफ्नो शरीर (शारीरिक) र दिमाग (भावनात्मक) मा विभिन्न परिवर्तनहरू अनुभव गर्छन्।",
+  "800": "यो प्राकृतिक रूपमा हुने घटना भएको हुनाले, साना बच्चाहरू यी परिवर्तनहरूबाट डराउनु हुँदैन। यहाँ केहि परिवर्तनहरू छन् जुन तपाईले सचेत हुनुपर्छ।",
+  "1600": "त्यसोभए, तपाईंले कस्तो प्रकारको परिवर्तनहरू अनुभव गर्न सक्नुहुन्छ पत्ता लगाउनुहोस्!",
+  "2000": "भोकमा परिवर्तन, खानाको लालसा बढ्यो वा घट्यो",
+  "3000": "",
+  "3600": "ध्यान केन्द्रित गर्न वा याद गर्न कठिनाइहरू पनि हुन सक्छ।",
+  "5000": "",
+  "5400": "कमजोर, चिन्ता, बेचैनी, वा किनारामा महसुस गर्दै।",
+  "6600": "",
+  "7400": "मूड र भावनात्मक प्रकोपमा द्रुत परिवर्तन",
+  "8800": "",
+  "10000": "मुँहासे र छाला समस्या",
+  "11000": "",
+  "11200": "तौल बढ्नु, पेटमा ग्यास हुनु, पेट फुल्नु वा वाकवाकी लाग्नु, पखाला वा कब्जियत",
+  "12400": "",
+  "12800": "छाती दुख्ने, सुन्निने, नरम वा कडा हुनु",
+  "14000": "",
+  "14400": "थकान र टाउको दुखाइ",
+  "15400": "दुर्भाग्यवश, PMS को लागि कुनै उत्तम उपचार छैन। यद्यपि, यदि लक्षणहरू तपाईंको दैनिक जीवनमा बाधा पुर्‍याउन पर्याप्त गम्भीर भएमा, तपाईं चिकित्सा उपचारको लागि डाक्टर वा चिकित्सकसँग सम्पर्क गर्न सक्नुहुन्छ।",
+  "17000": "",
+  "21700": "महिनावारी हुने केटी र महिलाको औसत दायरा ११ देखि ४५ सम्मको हुन्छ (महिला सुरु हुने र समाप्त गर्ने उमेर केटी र महिलामा फरक हुन्छ)",
+  "22700": "त्यो उमेरको वरिपरि तपाईलाई स्थायी रूपमा महिनावारी हुँदैन र यसलाई रजोनिवृत्ति भनिन्छ।*\n* रजोनिवृत्ति: यसको मतलब तपाईंको महिनावारी स्थायी रूपमा रोकिन्छ। अन्तिम अवधि।",
+  "23700": "रजोनिवृत्तिको औसत उमेर 45 वर्ष हो, तर यो पनि प्रत्येक व्यक्तिको लागि फरक हुन सक्छ। ",
+  "24700": "",
+  "26000": "मासिक धर्म चक्र सामान्यतया हरेक 21 देखि 35 दिनमा दोहोरिन्छ,",
+  "27000": "र यो लगभग 3 देखि 7 दिन सम्म रहन्छ। यद्यपि,",
+  "28500": "किशोरावस्थामा महिनावारी प्रायः अनियमित हुन्छ।",
+  "32700": ""
+}

src/config/i18n/ne/Ch3Subtitles.json

@@ -0,0 +1,22 @@
+{
+  "0": "",
+  "800": "यदि तपाईंको अन्डरवियर (प्यान्टी) वा लुगाहरूमा गाढा खैरो/खैरो/रातो दाग छ भने, यसको मतलब तपाईंको महिनावारी सुरु हुन्छ।",
+  "2400": "तपाईंले गर्न सक्ने केही कुराहरू यहाँ छन्।",
+  "4000": "",
+  "4600": "यदि उपलब्ध छ भने, दाग भएका लुगाहरू हटाउनुहोस् र सकेसम्म चाँडो सफा कपडामा परिवर्तन गर्नुहोस्।",
+  "6800": "",
+  "7400": "साबुन/लुन्ड्री डिटर्जेन्टले",
+  "8400": "",
+  "9000": "न्यानो वा अलिकति चिसो पानीमा जतिसक्दो चाँडो रगत निकाल्नुहोस् ",
+  "10500": "किनभने रगत छिट्टै भिज्ने सम्भावना हुन्छ।",
+  "12000": "",
+  "13000": "महिनावारी हुनु भनेको हरेक केटी र महिलाले अनुभव गर्ने एकदमै प्राकृतिक घटना हो, तर महिनावारीको समयमा रगत निस्कनलाई नियन्त्रण गर्न नसक्दा तपाईलाई असहज लाग्न सक्छ।",
+  "14200": "यसैले सेनेटरी उत्पादनहरू यहाँ छन् ",
+  "15400": "जुन अवधिमा पनि तपाईंको दैनिक जीवनलाई सुरक्षित राख्न मद्दत गर्दछ।",
+  "16600": "संसारमा विभिन्न प्रकारका उत्पादनहरू छन्, ",
+  "17800": "त्यसैले तपाईंले आफ्नो परिवेश (देश, समुदाय, आदि) को आधारमा आफ्नो लागि सबैभन्दा पहुँचयोग्य र उपयुक्त प्रयोग गर्न सक्नुहुन्छ।",
+  "19000": "तलका प्रत्येक सेनेटरी उत्पादनहरूमा क्लिक गर्नुहोस् र तिनीहरूलाई कसरी प्रयोग गर्ने जान्नुहोस्।",
+  "20000": "",
+  "22500": "माथि उल्लेख गरिएका सेनेटरी उत्पादनहरू नजिकैको बजार वा पसलहरूबाट किन्नुहोस् जहाँ तिनीहरू छन् भने।",
+  "23200": ""
+}

src/config/i18n/ne/Errors.json

@@ -0,0 +1,4 @@
+{
+  "404-title": "Page 404",
+  "404-desc": "यहाँ केहि छैन!"
+}

src/config/i18n/ne/Period.json

@@ -0,0 +1,30 @@
+{
+  "Title": "रगत बगाउन ठीक छ!",
+  "period": "महिनावारी",
+  "home": "घर",
+  "chapters": "अध्यायहरू",
+  "contact": "सम्पर्क",
+  "support": "केटीहरूलाई समर्थन गर्नुहोस्",
+  "Chapter1-1Title": "परिचय",
+  "Chapter1-2Title": "हाम्रो महिनावारी किन हुन्छ?",
+  "Chapter2-1Title": "महिनावारी हुनुभन्दा अघि वा समयमा के कस्ता लक्षणहरू देखा पर्छन्?",
+  "Chapter2-2Title": "प्रीमेन्स्ट्रुअल सिन्ड्रोम",
+  "Chapter2-3Title": "अवधि दुखाइ",
+  "Chapter2-4Title": "अवधि बारे थप जानकारी",
+  "Chapter3-1Title": "मेरो पिरियड भर्खर सुरु भएको छ । मैले के गर्नुपर्छ?",
+  "Chapter4-1Title": "अवधिमा हाम्रो दैनिक जीवन कसरी व्यवस्थापन गर्ने?",
+  "Chapter4-2Title": "सेनेटरी उत्पादनहरू कसरी प्रयोग गर्ने?",
+  "LastChapterIndex": "रगत बगाउन ठीक छ!",
+  "LastChapterTitle": " त्यसोभए, हामी तपाईंलाई ठूलो स्वरमा बोल्न चाहन्छौं,\nरगत बगाउन ठीक छ!",
+  "LastChapterContent1": "संसारभरि,",
+  "LastChapterContent2": "यस्तो देखिन्छ कि अवधि केहि चीज हो जुन तपाईले लुकाउनु पर्छ र कुरा गर्नु हुँदैन।",
+  "LastChapterContent3": "यद्यपि, महिनावारी हुनु एक प्राकृतिक घटना हो र यसलाई फोहोर वा पापको रूपमा लिनु हुँदैन।",
+  "NextPage": "अर्को पृष्ठ",
+  "Next": "अर्को",
+  "Back": "अघिल्लो",
+  "GuideText": "कृपया बटन क्लिक गर्नुहोस् र अर्को पृष्ठमा जानुहोस्",
+  "TeamTitle": "कसले ब्लीड गर्न ठीक बनायो?",
+  "TeamIntro": "दक्षिण कोरियाका 10 सफल, भावुक महिलाहरूले यो परियोजना बनाए।\nहाम्रो कथाको बारेमा थप पढ्नको लागि (कोरियन भाषामा लेखिएको!), तलको लिङ्कमा क्लिक गर्नुहोस्।",
+  "NewsletterLink": "https://stib.ee/ouP6",
+  "ComingSoon": "आउदैछ"
+}