- implement actions section

src/components/builder/lists/List.js

@@ -53,13 +53,9 @@ const List = ({
         )}
       </div>
 
-      <Button
-        outline
-        icon={MdAdd}
-        title="Add New"
-        onClick={handleAdd}
-        className="mt-8 ml-auto"
-      />
+      <Button outline icon={MdAdd} onClick={handleAdd} className="mt-8 ml-auto">
+        Add New
+      </Button>
     </div>
   );
 };

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

@@ -1,25 +1,52 @@
-import React, { memo } from 'react';
+import React, { memo, useContext } from 'react';
 import { MdImportExport } from 'react-icons/md';
+import { clone } from 'lodash';
 import Heading from '../../../shared/Heading';
 import Button from '../../../shared/Button';
 import styles from './Actions.module.css';
 import Input from '../../../shared/Input';
+import ModalContext from '../../../../contexts/ModalContext';
+import { useSelector } from '../../../../contexts/ResumeContext';
 
 const Actions = () => {
+  const state = useSelector();
+  const { emitter, events } = useContext(ModalContext);
+
+  const handleImport = () => emitter.emit(events.IMPORT_MODAL);
+
+  const handleExportToJson = () => {
+    const backupObj = clone(state);
+    delete backupObj.id;
+    const dataStr = `data:text/json;charset=utf-8,${encodeURIComponent(
+      JSON.stringify(backupObj),
+    )}`;
+    const dlAnchor = document.getElementById('downloadAnchor');
+    dlAnchor.setAttribute('href', dataStr);
+    dlAnchor.setAttribute('download', `RxResume_${state.id}.json`);
+    dlAnchor.click();
+  };
+
+  const getSharableUrl = () => {
+    const shareId = state.id.split('-')[0];
+    return `https://rxresu.me/r/${shareId}`;
+  };
+
   return (
     <section>
       <Heading>Actions</Heading>
 
       <div className={styles.container}>
-        <h5>Import from Other Sources</h5>
+        <h5>Import Your Resume</h5>
 
         <p>
           You can import your information from various sources like JSON Resume
-          or your LinkedIn profile to autofill most of the data for your resume.
+          or your LinkedIn to autofill most of the data for your resume.
         </p>
 
         <div className="mt-4 flex">
-          <Button icon={MdImportExport} title="Import" />
+          <Button icon={MdImportExport} onClick={handleImport}>
+            Import
+          </Button>
         </div>
       </div>
 
@@ -32,21 +59,27 @@ const Actions = () => {
         </p>
 
         <div className="mt-4 flex">
-          <Button title="Save as PDF" />
-          <Button outline title="Export as JSON" className="ml-6" />
+          <Button>Save as PDF</Button>
+          <Button outline className="ml-6" onClick={handleExportToJson}>
+            Export as JSON
+          </Button>
         </div>
+
+        <a id="downloadAnchor" className="hidden">
+          Download Exported JSON
+        </a>
       </div>
 
       <div className={styles.container}>
         <h5>Share Your Resume</h5>
 
         <p>
-          The link below will be accessible publicly if you choose, and you can
-          share the latest version of your resume to anyone in the world.
+          The link below will be accessible publicly if you choose to share it,
+          and viewers would see the latest version of your resume at any time.
         </p>
 
         <div>
-          <Input type="action" value="https://google.com" onClick={() => {}} />
+          <Input type="action" value={getSharableUrl()} onClick={() => {}} />
         </div>
       </div>
 
@@ -59,7 +92,7 @@ const Actions = () => {
         </p>
 
         <div className="mt-4 flex">
-          <Button title="Load Demo Data" />
+          <Button>Load Demo Data</Button>
         </div>
       </div>
 
@@ -73,7 +106,7 @@ const Actions = () => {
         </p>
 
         <div className="mt-4 flex">
-          <Button title="Delete Account" />
+          <Button isDelete>Delete Account</Button>
         </div>
       </div>
     </section>

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

@@ -1,7 +1,7 @@
 /* eslint-disable jsx-a11y/control-has-associated-label */
 import React, { memo } from 'react';
 import { useDispatch } from '../../../../contexts/ResumeContext';
-import colors from '../../../../data/colors';
+import colorOptions from '../../../../data/colorOptions';
 import { handleKeyUp } from '../../../../utils';
 import Heading from '../../../shared/Heading';
 import Input from '../../../shared/Input';
@@ -25,7 +25,7 @@ const Colors = () => {
       <Heading>Colors</Heading>
 
       <div className="mb-6 grid grid-cols-8 col-gap-2 row-gap-6">
-        {colors.map((color) => (
+        {colorOptions.map((color) => (
           <div
             key={color}
             tabIndex="0"

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

@@ -1,7 +1,7 @@
 import cx from 'classnames';
 import React, { memo } from 'react';
 import { useDispatch, useSelector } from '../../../../contexts/ResumeContext';
-import fonts from '../../../../data/fonts';
+import fontOptions from '../../../../data/fontOptions';
 import { handleKeyUp } from '../../../../utils';
 import Heading from '../../../shared/Heading';
 import styles from './Fonts.module.css';
@@ -25,7 +25,7 @@ const Fonts = () => {
       <Heading>Fonts</Heading>
 
       <div className="grid grid-cols-2 gap-8">
-        {fonts.map((x) => (
+        {fontOptions.map((x) => (
           <div
             key={x}
             tabIndex="0"

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

@@ -1,7 +1,7 @@
 import cx from 'classnames';
 import React, { memo, useContext } from 'react';
 import { useDispatch, useSelector } from '../../../../contexts/ResumeContext';
-import templates from '../../../../data/templates';
+import templateOptions from '../../../../data/templateOptions';
 import { handleKeyUp } from '../../../../utils';
 import Heading from '../../../shared/Heading';
 import styles from './Templates.module.css';
@@ -28,7 +28,7 @@ const Templates = () => {
       <Heading>Templates</Heading>
 
       <div className="grid grid-cols-2 gap-8">
-        {templates.map((x) => (
+        {templateOptions.map((x) => (
           <div
             key={x.id}
             tabIndex="0"

src/components/landing/Hero.js

@@ -28,21 +28,20 @@ const Hero = () => {
 
         <div className="mt-12 flex">
           {user ? (
-            <Button
-              title="Go to App"
-              onClick={handleGotoApp}
-              isLoading={loading}
-            />
+            <Button onClick={handleGotoApp} isLoading={loading}>
+              Go to App
+            </Button>
           ) : (
             <Button title="Login" onClick={handleLogin} isLoading={loading} />
           )}
           <Button
             outline
             className="ml-8"
-            title="GitHub"
             icon={FaGithub}
             onClick={toggleDarkMode}
-          />
+          >
+            GitHub
+          </Button>
         </div>
       </div>
     </div>

src/components/shared/Button.js

@@ -3,7 +3,15 @@ import React, { memo } from 'react';
 import { handleKeyUp } from '../../utils';
 import styles from './Button.module.css';
 
-const Button = ({ icon, title, onClick, outline, className, isLoading }) => {
+const Button = ({
+  icon,
+  onClick,
+  outline,
+  children,
+  className,
+  isLoading,
+  isDelete,
+}) => {
   const Icon = icon;
 
   return (
@@ -12,10 +20,11 @@ const Button = ({ icon, title, onClick, outline, className, isLoading }) => {
       onClick={isLoading ? undefined : onClick}
       className={cx(styles.container, className, {
         [styles.outline]: outline,
+        [styles.delete]: isDelete,
       })}
     >
       {icon && <Icon size="14" className="mr-3" />}
-      {isLoading ? 'Loading...' : title}
+      {isLoading ? 'Loading...' : children}
     </button>
   );
 };

src/components/shared/Button.module.css

@@ -29,3 +29,15 @@
 .container.outline:focus {
   @apply outline-none;
 }
+
+.container.delete {
+  @apply bg-red-600 border-red-600 text-white;
+}
+
+.container.delete:hover {
+  @apply bg-red-700 border-red-700;
+}
+
+.container.delete:focus {
+  @apply outline-none;
+}

src/components/shared/Input.js

@@ -4,7 +4,6 @@ import React, { memo, useEffect, useState } from 'react';
 import { FaAngleDown } from 'react-icons/fa';
 import { MdClose, MdOpenInNew } from 'react-icons/md';
 import { v4 as uuidv4 } from 'uuid';
-import { IoIosCopy } from 'react-icons/io';
 import { useDispatch, useSelector } from '../../contexts/ResumeContext';
 import { handleKeyUp } from '../../utils';
 import styles from './Input.module.css';