From f6af161dd0b8b9161c9d243e4026285828516b71 Mon Sep 17 00:00:00 2001
From: Phong <phongdaohong@gmail.com>
Date: Sun, 19 Sep 2021 03:37:10 +0000
Subject: [PATCH 1/4] translate live code sample

---
 content/home/examples/a-component-using-external-plugins.js | 6 +++---
 content/home/examples/a-simple-component.js                 | 2 +-
 content/home/examples/a-stateful-component.js               | 2 +-
 content/home/examples/an-application.js                     | 6 +++---
 src/components/CodeEditor/CodeEditor.js                     | 4 ++--
 5 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/content/home/examples/a-component-using-external-plugins.js b/content/home/examples/a-component-using-external-plugins.js
index 305efe61c..b84a8862c 100644
--- a/content/home/examples/a-component-using-external-plugins.js
+++ b/content/home/examples/a-component-using-external-plugins.js
@@ -17,16 +17,16 @@ class MarkdownEditor extends React.Component {
   render() {
     return (
       <div className="MarkdownEditor">
-        <h3>Input</h3>
+        <h3>Đầu vào</h3>
         <label htmlFor="markdown-content">
-          Enter some markdown
+          Nhập vào một chút markdown
         </label>
         <textarea
           id="markdown-content"
           onChange={this.handleChange}
           defaultValue={this.state.value}
         />
-        <h3>Output</h3>
+        <h3>Kết quả</h3>
         <div
           className="content"
           dangerouslySetInnerHTML={this.getRawMarkup()}
diff --git a/content/home/examples/a-simple-component.js b/content/home/examples/a-simple-component.js
index 90c31b960..205b4597a 100644
--- a/content/home/examples/a-simple-component.js
+++ b/content/home/examples/a-simple-component.js
@@ -2,7 +2,7 @@ class HelloMessage extends React.Component {
   render() {
     return (
       <div>
-        Hello {this.props.name}
+        Xin chào {this.props.name}
       </div>
     );
   }
diff --git a/content/home/examples/a-stateful-component.js b/content/home/examples/a-stateful-component.js
index 25d5a9145..76bc9f1ab 100644
--- a/content/home/examples/a-stateful-component.js
+++ b/content/home/examples/a-stateful-component.js
@@ -21,7 +21,7 @@ class Timer extends React.Component {
   render() {
     return (
       <div>
-        Seconds: {this.state.seconds}
+        Bộ đếm giây: {this.state.seconds}
       </div>
     );
   }
diff --git a/content/home/examples/an-application.js b/content/home/examples/an-application.js
index 08dbc2bf8..4abca29c3 100644
--- a/content/home/examples/an-application.js
+++ b/content/home/examples/an-application.js
@@ -9,11 +9,11 @@ class TodoApp extends React.Component {
   render() {
     return (
       <div>
-        <h3>TODO</h3>
+        <h3>Danh sách công việc</h3>
         <TodoList items={this.state.items} />
         <form onSubmit={this.handleSubmit}>
           <label htmlFor="new-todo">
-            What needs to be done?
+            Bạn cần làm gì?
           </label>
           <input
             id="new-todo"
@@ -21,7 +21,7 @@ class TodoApp extends React.Component {
             value={this.state.text}
           />
           <button>
-            Add #{this.state.items.length + 1}
+            Thêm #{this.state.items.length + 1}
           </button>
         </form>
       </div>
diff --git a/src/components/CodeEditor/CodeEditor.js b/src/components/CodeEditor/CodeEditor.js
index 9478494e2..99c8e70a7 100644
--- a/src/components/CodeEditor/CodeEditor.js
+++ b/src/components/CodeEditor/CodeEditor.js
@@ -105,7 +105,7 @@ class CodeEditor extends Component {
                 color: colors.white,
               }}>
               <MetaTitle onDark={true}>
-                Live JSX Editor
+                Trình code Live JSX
                 <label
                   css={{
                     fontSize: 14,
@@ -206,7 +206,7 @@ class CodeEditor extends Component {
                   padding: '0 10px',
                   backgroundColor: colors.divider,
                 }}>
-                <MetaTitle>Result</MetaTitle>
+                <MetaTitle>Kết quả</MetaTitle>
               </div>
               <div
                 id={containerNodeID}

From dbbb383f3638e1643cc9677f037ca1068e580d47 Mon Sep 17 00:00:00 2001
From: Ryan Le <thinh.le.sdev@gmail.com>
Date: Mon, 20 Sep 2021 16:20:29 +0700
Subject: [PATCH 2/4] Update a-component-using-external-plugins.js

---
 content/home/examples/a-component-using-external-plugins.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/content/home/examples/a-component-using-external-plugins.js b/content/home/examples/a-component-using-external-plugins.js
index b84a8862c..e6b5a068f 100644
--- a/content/home/examples/a-component-using-external-plugins.js
+++ b/content/home/examples/a-component-using-external-plugins.js
@@ -19,14 +19,14 @@ class MarkdownEditor extends React.Component {
       <div className="MarkdownEditor">
         <h3>Đầu vào</h3>
         <label htmlFor="markdown-content">
-          Nhập vào một chút markdown
+          Nhập dưới dạng markdown
         </label>
         <textarea
           id="markdown-content"
           onChange={this.handleChange}
           defaultValue={this.state.value}
         />
-        <h3>Kết quả</h3>
+        <h3>Kết Quả</h3>
         <div
           className="content"
           dangerouslySetInnerHTML={this.getRawMarkup()}

From 403bbc0f372c6a92c7eb23e61ff6b2ef55ddd9b4 Mon Sep 17 00:00:00 2001
From: Ryan Le <thinh.le.sdev@gmail.com>
Date: Mon, 20 Sep 2021 16:20:51 +0700
Subject: [PATCH 3/4] Update a-stateful-component.js

---
 content/home/examples/a-stateful-component.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/content/home/examples/a-stateful-component.js b/content/home/examples/a-stateful-component.js
index 76bc9f1ab..9d25eaa09 100644
--- a/content/home/examples/a-stateful-component.js
+++ b/content/home/examples/a-stateful-component.js
@@ -21,7 +21,7 @@ class Timer extends React.Component {
   render() {
     return (
       <div>
-        Bộ đếm giây: {this.state.seconds}
+        Giây: {this.state.seconds}
       </div>
     );
   }
@@ -30,4 +30,4 @@ class Timer extends React.Component {
 ReactDOM.render(
   <Timer />,
   document.getElementById('timer-example')
-);
\ No newline at end of file
+);

From f58a5caae3806c213825e1f7e9c75390492a1161 Mon Sep 17 00:00:00 2001
From: Ryan Le <thinh.le.sdev@gmail.com>
Date: Mon, 20 Sep 2021 16:21:36 +0700
Subject: [PATCH 4/4] Update CodeEditor.js

---
 src/components/CodeEditor/CodeEditor.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/CodeEditor/CodeEditor.js b/src/components/CodeEditor/CodeEditor.js
index 99c8e70a7..1dbc1d272 100644
--- a/src/components/CodeEditor/CodeEditor.js
+++ b/src/components/CodeEditor/CodeEditor.js
@@ -105,7 +105,7 @@ class CodeEditor extends Component {
                 color: colors.white,
               }}>
               <MetaTitle onDark={true}>
-                Trình code Live JSX
+                Trình Chỉnh Sửa JSX
                 <label
                   css={{
                     fontSize: 14,