From ec79b3ff8ee9a24607a495d446aa4f0150d2387d Mon Sep 17 00:00:00 2001
From: receptiryaki <recep.tiryaki@gmail.com>
Date: Fri, 17 Apr 2020 11:51:34 +0300
Subject: [PATCH] language feature added.

---
 src/app/containers/HomePage/Features.tsx    | 14 ++++++
 src/app/containers/LanguageSwitch/index.tsx | 51 +++++++++++++++++++++
 2 files changed, 65 insertions(+)
 create mode 100644 src/app/containers/LanguageSwitch/index.tsx

diff --git a/src/app/containers/HomePage/Features.tsx b/src/app/containers/HomePage/Features.tsx
index 0c9c1938..9b557a21 100644
--- a/src/app/containers/HomePage/Features.tsx
+++ b/src/app/containers/HomePage/Features.tsx
@@ -4,11 +4,13 @@ import { Title } from 'app/containers/HomePage/components/Title';
 import { Lead } from './components/Lead';
 import { ReactComponent as StateIcon } from './assets/state.svg';
 import { ReactComponent as CSSIcon } from './assets/css.svg';
+import { ReactComponent as INTLIcon } from './assets/intl.svg';
 import { SubTitle } from 'app/containers/HomePage/components/SubTitle';
 import { P } from './components/P';
 import { A } from 'app/components/A';
 import { GithubRepoForm } from 'app/containers/GithubRepoForm';
 import { ThemeSwitch } from 'app/containers/ThemeSwitch';
+import { LanguageSwitch } from '../LanguageSwitch';
 
 export function Features() {
   return (
@@ -65,6 +67,18 @@ export function Features() {
             <ThemeSwitch />
           </Content>
         </Feature>
+        <Feature>
+          <INTLIcon className="feature-icon" />
+          <Content>
+            <SubTitle>i18n Internationalization </SubTitle>
+            <P>
+              Scalable apps need to support multiple languages, easily add and
+              support multiple languages. Change the language below to see how
+              instantly it updates the page without refreshing.
+            </P>
+            <LanguageSwitch />
+          </Content>
+        </Feature>
       </List>
     </>
   );
diff --git a/src/app/containers/LanguageSwitch/index.tsx b/src/app/containers/LanguageSwitch/index.tsx
new file mode 100644
index 00000000..c63b64e1
--- /dev/null
+++ b/src/app/containers/LanguageSwitch/index.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import { FormLabel } from 'app/components/FormLabel';
+import { Radio } from 'app/components/Radio';
+import styled from 'styled-components/macro';
+
+export function LanguageSwitch() {
+  const handleLanguageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    console.log(event.target.value);
+  };
+
+  return (
+    <Wrapper>
+      <FormLabel>Select Language</FormLabel>
+      <Languages>
+        <Radio
+          id="en"
+          label="English"
+          className="radio"
+          name="language"
+          onChange={handleLanguageChange}
+          value="en"
+          /* isSelected={lang === 'en'} */
+        />
+        <Radio
+          id="tr"
+          label="Deutsch"
+          className="radio"
+          name="language"
+          onChange={handleLanguageChange}
+          value="de"
+          /* isSelected={lang === 'de'} */
+        />
+      </Languages>
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  ${FormLabel} {
+    margin-bottom: 0.625rem;
+  }
+`;
+const Languages = styled.div`
+  display: flex;
+
+  .radio {
+    margin-right: 1.5rem;
+  }
+`;