chore: add translation.

jaywcjlove · Jun 6, 2022 · 5b10bea · 5b10bea
1 parent bb06454
commit 5b10bea
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 9 deletions.
diff --git a/packages/amount-in-rmb/src/index.tsx b/packages/amount-in-rmb/src/index.tsx
@@ -1,6 +1,7 @@
 import { Fragment, useState } from 'react';
 import { Wrapper, StyledLayout, CodeLineCopy, Button, Spacing, Textarea } from '@wcj/tools-react-components';
 import styled from 'styled-components';
+import { useTranslation } from 'react-i18next';
 import nzh from 'nzh/cn';
 
 const Input = styled.input`
@@ -43,6 +44,7 @@ type Data = {
 };
 
 export default function AmountInRMB() {
+  const { t } = useTranslation();
   const [range, setRange] = useState<number>(0);
   const [history, setHistory] = useState<Data[]>([]);
 
@@ -54,7 +56,7 @@ export default function AmountInRMB() {
 
   return (
     <Wrapper>
-      <StyledLayout overflow="initial" title="Input Number">
+      <StyledLayout overflow="initial" title={t('menu./amount-in-rmb.label')}>
         <InputRange
           style={{ minWidth: 320, padding: '6px 5px' }}
           type="number"

diff --git a/packages/chinese-pinyin-conversion/src/index.tsx b/packages/chinese-pinyin-conversion/src/index.tsx
@@ -1,6 +1,7 @@
 import { Fragment, InputHTMLAttributes, useEffect, useState } from 'react';
 import { Wrapper, Textarea, StyledLayout, CopyButton, ResultCode, Button } from '@wcj/tools-react-components';
 import styled from 'styled-components';
+import { useTranslation } from 'react-i18next';
 // @ts-ignore
 import pinyin from 'pinyin/lib/web-pinyin';
 // import { IPinyinStyle } from 'pinyin';
@@ -56,6 +57,7 @@ const InputRadio: React.FC<React.PropsWithChildren<InputRadioProps>> = ({ style,
 );
 
 export default function ChinesePinyinConversion() {
+  const { t } = useTranslation();
   const [value, setValue] = useState<string>();
   const [style, setStyle] = useState<IPinyinStyle>('TONE');
   const [result, setResult] = useState<string>();
@@ -107,7 +109,7 @@ export default function ChinesePinyinConversion() {
   return (
     <Wrapper>
       <StyledLayout
-        title="Input Chinese Characters"
+        title={t('menu./chinese-pinyin-conversion.label')}
         extra={
           <Fragment>
             <Button onClick={() => setValue(sample)}>Sample</Button>

diff --git a/website/src/app/Home.tsx b/website/src/app/Home.tsx
@@ -50,7 +50,7 @@ export default function HomePage() {
         {tools.map((item, key) => {
           return (
             <Link key={key} to={item.href || ''}>
-              <LogoIcon src={item.logo} alt={item.label} />
+              <LogoIcon size="38px" src={item.logo} alt={item.label} />
               {item.label}
             </Link>
           );

diff --git a/website/src/app/Layout.module.less b/website/src/app/Layout.module.less
@@ -35,9 +35,6 @@
       padding-top: 10px;
       max-height: calc(100vh - 41px);
       overflow: auto;
-      div.divider {
-        border-top: 1px solid var(--color-border-muted);
-      }
     }
     nav a {
       padding: 5px 6px;

diff --git a/website/src/app/Layout.tsx b/website/src/app/Layout.tsx
@@ -11,6 +11,10 @@ import { useMenus } from '../menus';
 import { TransSelect } from '../components/TransSelect';
 import { LogoIcon as Logo } from '../components/Logo';
 
+const Divider = styled.div`
+  border-top: 1px solid var(--color-border-muted);
+`;
+
 const Sup = styled.sup`
   position: absolute;
   font-weight: normal;
@@ -38,6 +42,11 @@ const LabelText = styled.span`
   overflow: hidden;
 `;
 
+const Article = styled.article`
+  overflow: auto;
+  flex: 1;
+`;
+
 export default function Layout() {
   const menus = useMenus();
   const { t } = useTranslation();
@@ -66,7 +75,7 @@ export default function Layout() {
           <nav>
             {menus.map((item, idx) => {
               if (item.divider) {
-                return <div key={idx} className={styles.divider}></div>;
+                return <Divider key={idx}></Divider>;
               }
               if (/https?:/.test(item.href || '')) {
                 return (
@@ -102,9 +111,9 @@ export default function Layout() {
             })}
           </nav>
         </aside>
-        <article>
+        <Article>
           <Outlet />
-        </article>
+        </Article>
       </div>
     </Fragment>
   );