- implement about section

src/components/builder/right/sections/About.js

@@ -1,5 +1,6 @@
 import React, { memo } from 'react';
-import { FaCoffee } from 'react-icons/fa';
+import { FaCoffee, FaBug } from 'react-icons/fa';
+import { MdCode } from 'react-icons/md';
 import Button from '../../../shared/Button';
 import Heading from '../../../shared/Heading';
 import styles from './About.module.css';
@@ -37,6 +38,75 @@ const About = () => {
           </a>
         </div>
       </div>
+
+      <div className={styles.container}>
+        <h5>Bug? Feature Request?</h5>
+
+        <p className="leading-loose">
+          Something halting your progress from making a resume? Found a pesky
+          bug that just won&apos;t quit? Talk about it on the GitHub Issues
+          section, or send me and email using the actions below.
+        </p>
+
+        <div className="mt-4 flex">
+          <a
+            href="https://github.com/AmruthPillai/Reactive-Resume/issues/new"
+            rel="noreferrer"
+            target="_blank"
+          >
+            <Button icon={FaBug}>Raise an Issue</Button>
+          </a>
+        </div>
+      </div>
+
+      <div className={styles.container}>
+        <h5>Source Code</h5>
+
+        <p className="leading-loose">
+          Want to run the project from its source? Are you a developer willing
+          to contribute to the open-source development of this project? Click
+          the button below.
+        </p>
+
+        <div className="mt-4 flex">
+          <a
+            href="https://github.com/AmruthPillai/Reactive-Resume"
+            rel="noreferrer"
+            target="_blank"
+          >
+            <Button icon={MdCode}>GitHub Repo</Button>
+          </a>
+        </div>
+      </div>
+
+      <div className={styles.container}>
+        <h5>License Information</h5>
+
+        <p className="leading-loose">
+          The project is governed under the MIT License, which you can read more
+          about below. Basically, you are allowed to use the project anywhere
+          provided you give credits to the original author.
+        </p>
+
+        <div className="mt-4 flex">
+          <a
+            href="https://github.com/AmruthPillai/Reactive-Resume/blob/master/LICENSE"
+            rel="noreferrer"
+            target="_blank"
+          >
+            <Button icon={MdCode}>MIT License</Button>
+          </a>
+        </div>
+      </div>
+
+      <div className="my-4 text-center opacity-50 text-sm">
+        <p>
+          Made with Love by{' '}
+          <a href="https://amruthpillai.com" rel="noreferrer" target="_blank">
+            Amruth Pillai
+          </a>
+        </p>
+      </div>
     </section>
   );
 };

src/components/builder/right/sections/Settings.js

@@ -1,4 +1,5 @@
 import React, { memo, useContext, useState } from 'react';
+import { FaAngleDown } from 'react-icons/fa';
 import UserContext from '../../../../contexts/UserContext';
 import Button from '../../../shared/Button';
 import Heading from '../../../shared/Heading';
@@ -6,6 +7,7 @@ import styles from './Settings.module.css';
 import Input from '../../../shared/Input';
 import ThemeContext from '../../../../contexts/ThemeContext';
 import themeConfig from '../../../../data/themeConfig';
+import languageConfig from '../../../../data/languageConfig';
 
 const Settings = () => {
   const [deleteText, setDeleteText] = useState('Delete Account');
@@ -16,6 +18,10 @@ const Settings = () => {
     setTheme(e.target.value);
   };
 
+  const handleChangeLanguage = (e) => {
+    console.log(e.target.value);
+  };
+
   const handleDeleteAccount = () => {
     if (deleteText === 'Delete Account') {
       setDeleteText('Are you sure?');
@@ -40,6 +46,37 @@ const Settings = () => {
         onChange={handleChangeTheme}
       />
 
+      <label>
+        <span>Language</span>
+        <div className="relative grid items-center">
+          <select onChange={handleChangeLanguage}>
+            {languageConfig.map((x) => (
+              <option key={x.key} value={x.key}>
+                {x.name}
+              </option>
+            ))}
+          </select>
+
+          <FaAngleDown
+            size="16px"
+            className="absolute right-0 opacity-50 hover:opacity-75 mx-4"
+          />
+        </div>
+      </label>
+
+      <p className="text-sm leading-loose">
+        If you would like to contribute by providing translations to Reactive
+        Resume in your language,{' '}
+        <a
+          href="https://github.com/AmruthPillai/Reactive-Resume/blob/master/TRANSLATING.md"
+          rel="noreferrer"
+          target="_blank"
+        >
+          please visit this link
+        </a>
+        .
+      </p>
+
       <div className={styles.container}>
         <h5>Danger Zone</h5>