add i18n feature

Author: thai-nguyen-dinovative

config/@types/index.d.ts

@@ -15,7 +15,7 @@ declare module '*.png' {
 }
 
 declare module '*.json' {
-  const content: string;
+  const content: any;
   export default content;
 }
 

public/static/images/icon/arrow-down.svg

@@ -0,0 +1,62 @@
+import useOutsideClick from '@/hooks/useOutsideClick';
+import React, { useRef, useState } from 'react';
+import ArrowDown from '@/static/images/icon/arrow-down.svg';
+
+interface IOption {
+  value: any;
+  label: any;
+}
+
+interface IProps {
+  options: Array<IOption>;
+  width?: number;
+  onChange?: (option: IOption) => void;
+  className?: string;
+}
+
+const Select: React.FC<IProps> = ({
+  options,
+  width = 240,
+  onChange,
+  className,
+}) => {
+  const [show, setShow] = useState<boolean>(false);
+  const [option, setOption] = useState<IOption>(options[0]);
+  const selectRef = useRef(null);
+  useOutsideClick(selectRef, () => {
+    show === true && setShow(false);
+  });
+
+  function handleSelectDropdown(option: IOption) {
+    const opt = options.find(opt => opt.value === option.value);
+
+    typeof onChange === 'function' && onChange(opt);
+    setOption(opt);
+    setShow(false);
+  }
+  return (
+    <div
+      ref={selectRef}
+      style={{ width }}
+      className={`dropdown ${className || ''}`}
+    >
+      <div onClick={() => setShow(true)} className="dropdown-select">
+        <span className="dropdown-selected">{option.label}</span>
+        <ArrowDown className={`dropdown-caret ${show ? 'up' : 'down'}`} />
+      </div>
+      <ul className={`dropdown-list ${show ? 'show' : ''}`}>
+        {options.map(opt => (
+          <li
+            key={opt.value}
+            onClick={() => handleSelectDropdown(opt)}
+            className="dropdown-item"
+          >
+            {opt.label}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default Select;

public/static/images/icon/en.svg

@@ -0,0 +1,64 @@
+.dropdown {
+  color: $primary-color;
+  width: 100%;
+  position: relative;
+  border-radius: 8px;
+  .dropdown-caret {
+    width: 12px;
+    fill: $primary-color;
+
+    &.up {
+      transform: rotate(180deg);
+    }
+  }
+  .dropdown-select {
+    background-color: white;
+    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
+    padding: 1rem;
+    border-radius: inherit;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    cursor: pointer;
+  }
+  .dropdown-select * {
+    pointer-events: none;
+  }
+  .dropdown-list {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    margin-top: 0.4rem;
+    background-color: white;
+    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
+    padding: 1rem;
+    border-radius: 8px;
+    display: none;
+    &::before {
+      content: '';
+      height: 1rem;
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      background-color: transparent;
+      transform: translateY(-100%);
+    }
+    &.show {
+      display: block;
+    }
+
+    .dropdown-item {
+      padding: 1rem;
+      color: #47536b;
+      transition: all 0.25s ease;
+      border-radius: 8px;
+      cursor: pointer;
+      &:hover {
+        color: $primary-color;
+        background-color: #f1fbff;
+      }
+    }
+  }
+}

public/static/images/icon/vi.svg

@@ -1,7 +1,13 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import { ITag } from './types';
 import HomeTag from './components/tag';
+import Select from '@/components/select';
+import i18n from '@/locales/i18n';
+
 import Banner from '@/static/images/banner.png';
+import ViIcon from '@/static/images/icon/vi.svg';
+import EnIcon from '@/static/images/icon/en.svg';
 
 const keywords: Array<ITag> = [
   { label: 'React.js' },
@@ -12,31 +18,56 @@ const keywords: Array<ITag> = [
   { color: '#e94949', label: 'react-router' },
   { color: '#bf4080', label: 'sass' },
   { color: '#764abc', label: 'redux-thunk' },
-
   { color: '#2b037a', label: 'pm2' },
 ];
 
+const languageOptions = [
+  {
+    label: (
+      <div className="lang-item">
+        <ViIcon width={14} /> <span>&nbsp;&nbsp;</span> Vietnamese
+      </div>
+    ),
+    value: 'vi',
+  },
+  {
+    label: (
+      <div className="lang-item">
+        <EnIcon width={14} />
+        <span>&nbsp;&nbsp;</span> English
+      </div>
+    ),
+    value: 'en',
+  },
+];
+
 const Home: React.FC = () => {
+  const { t } = useTranslation();
   return (
     <div className="row home">
       <div className="container">
         <img className="banner" src={Banner} />
-        <div className="title">
-          React-Typescript-Webpack was config with React, Typescript and Webpack
-          without CRA. Faster to start your next react project.
-        </div>
+        <Select
+          className="select-language"
+          onChange={option => {
+            i18n.changeLanguage(option.value);
+          }}
+          options={languageOptions}
+        />
+        <div className="title">{t('home.title')}</div>
         <div>
           <div className="keywords">
             <i>
-              Keywords:
+              {t('home.keywords')}:
               {keywords.map(key => (
                 <HomeTag color={key.color} label={key.label} key={key.label} />
               ))}
             </i>
           </div>
         </div>
         <div className="aldenn">
-          Created with by 👻 <a href="http://aldenn.vercel.app/">Aldenn</a>
+          {t('home.created_by')} 👻{'  '}
+          <a href="http://aldenn.vercel.app/">Aldenn</a>
         </div>
       </div>
     </div>

src/components/select/index.tsx

@@ -4,9 +4,19 @@
   align-items: center;
   justify-content: center;
   text-align: center;
+  .select-language {
+    margin: 12px auto;
+    .lang-item {
+      display: flex;
+      align-items: center;
+    }
+  }
 
   .banner {
     margin-bottom: 20px;
+    @include s-mobile {
+      width: 100%;
+    }
   }
 
   .title {